AngularJS service is a function or an object that is used to access the resources, like calling web service or web API, getting URL, and browsing the information and is responsible to do specific tasks only. There are 30 built-in services available in AngularJS. Example - $http, $location etc.
AngularJS services are normally injected using dependency injection (DI) mechanism of AngularJS and these can be used to organize and share the code across your app.
AngularJS services are lazily instantiated which means that a service is only instantiated when an application component depends on it and the Singletons (i.e., each component being 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, the btnclick function is invoked on the click of button and calls the $location service to fetch the URL string. For more details, go through the example.
- <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
Like custom filter, which we have created in my previous article, custom services can also be created. There are three ways to create a service - factory method, service method, and provider method.
Creating custom service using provider function is a bit different than the factory and service methods. We will demonstrate the use of provider method in my next article. In this write-up, we will create a 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 a 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' services. These two services display the alert messages and are called by two buttons. For 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 blog, we demonstrated how to create a custom service using factory and service method and discussed about the AngularJS Services. Hope this information will be helpful to you.