Introduction
This blog introduce about AngularJS service, demonstrates how to use and create custom service.
Getting Started
AngularJS service is nothing but a function or an object that are use to access resources like calling web service or web API, getting URL and browser information and responsible to do a specific tasks only. There are 30 built-in services are available in AngularJS. Example $http, $location etc.
AngularJS services are normally injected using dependency injection(DI) mechanism of AngularJS and these are can be used to organize and share code across your app.
AngularJS services are Lazily instantiated means only instantiates a service when an application component depends on it and Singletons means each component dependent on a service gets a reference to the single instance generated by the service factory.
Example:
The following example demonstrates how to use AngularJS service. this example has used $location built-in service which provides the page URl. In this example btnclick function which invokes on click of button, calls $location service to fetch URL string. For more details go through the exampleCode:-
<HTML ng-app="myapp">
<TITLE> AngularJS learning(Service)</TITLE>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script>
var myapp = angular.module('myapp', []);
myapp.controller('myappcont', function($scope, $location) {
$scope.btnclick=function(){
alert('Your URL is: '+$location.absUrl());
}
});
</script>
<BODY ng-controller="myappcont">
<p>Click to get URL info:<button ng-click="btnclick()">Click</button></p>
</BODY>
</HTML>
Creating Custom Service
As like custom filter, what we have created in my previous article. custom services can be created as well. There are three ways to create a service that is factory method,service method and provider method.Creating custom service using provider function is bit difference than factory and service method. We will demonstrate use of provider method in my next article, in this article we will create custom service using factory and service method.
Creating service using Factory method
The following code example creates a service using factory method. var myapp = angular.module('myapp', []);
myapp.factory('FactoryMadeService', function() {
return{
show:function(){
alert('This is created by factory method');
}
}
});
Creating service using Service method
Following code example creates service using service method. myapp.service('ServiceMadeService', function() {
this.show=function(){
alert('This is created by service method');
}
});
Example:
This example creates two 'FactoryMadeService' and 'ServiceMadeService' service. This two services display alert message and are called by two buttons. Fore more details go through the example. <HTML ng-app="myapp">
<TITLE> AngularJS learning(Custom Service)</TITLE>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script>
var myapp = angular.module('myapp', []);
myapp.factory('FactoryMadeService', function() {
return{
show:function(){
alert('This is created by factory method');
}
}
});
myapp.service('ServiceMadeService', function() {
this.show=function(){
alert('This is created by service method');
}
});
myapp.controller('myappcont', function($scope,FactoryMadeService,ServiceMadeService) {
$scope.btnfclick=function(){
FactoryMadeService.show();
}
$scope.btnsclick=function()
{
ServiceMadeService.show();
}
});
</script>
<BODY ng-controller="myappcont">
<p>Click to call Factory Made Service:<button ng-click="btnfclick()">Click</button></p>
<p>Click to call Service Made Service:<button ng-click="btnsclick()">Click</button></p>
</BODY>
</HTML>
Summary
In this article we demonstrated how to create custom services using factory and service method and discussed about the AngularJS service. Hope this article may helpful to you, happy coding and enjo.....y.
Thanks
Kailash Chandra Behera
No comments:
Post a Comment