Angular

Start With AngularJS: Part 6

Thank you for reading my previous article. If you have not read that, then study from the following links. After reading them it would be easier to understand today’s topics.

Today you will study about AngularJS services.

What is a Service

Services are JavaScript functions and are responsible to do specific tasks only. AngularJS has about 30 built-in services. One of them is the $location, $http, $provide, $resource, $window, $parse service.

Different ways to create service in AngularJS: Factory

Factory is a simple function which allows you to add some logic before creating the object. It returns the created object.

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Factory Demo</title>  
  6.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">  
  7.         </script>  
  8.         <script>  
  9.             var app = angular.module('app', []);  
  10.             app.controller("MemberController", function($scope, myFactory)  
  11.             {  
  12.                 $scope.FirstName = myFactory.FirstName;  
  13.                 $scope.FullName = myFactory.FullName;  
  14.             });  
  15.             app.factory('myFactory', function()  
  16.                {  
  17.                 varmyName = "Shiva";  
  18.                 function getName()   
  19.                 {  
  20.                     return myName;  
  21.                 }  
  22.                 return   
  23.                 {  
  24.                     FullName: getName() + " " + "shukla",  
  25.                     FirstName: getName()  
  26.                 };  
  27.             });  
  28.         </script>  
  29. </head>  
  30. <body ng-app="app">  
  31.     <p>AngularJS Factory</p>  
  32.   
  33.   
  34.     <div ng-controller="MemberController">  
  35.         <p>  
  36.             FirstName: {{FirstName}}  
  37.         </p>  
  38.         <p>  
  39.             FullName: {{FullName}}  
  40.         </p>  
  41.         </div>  
  42.         </body>  
  43.   
  44. </html>  
Output

output

When to use: It is just a collection of functions like a class. Hence, it can be instantiated in different controllers when you are using it with constructor function.

Service:

Service is a constructor function which creates the object using new keyword. You can add properties and functions to a service object by using this keyword. Unlike factory, it doesn’t return anything.
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Service Demo</title>  
  6.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">  
  7.         </script>  
  8.         <script>  
  9.             var app = angular.module('app', []);  
  10.             app.controller('MemberController', function($scope, myService)  
  11.              {  
  12.                 $scope.FirstName = myService.FirstName();  
  13.                 $scope.FullName = myService.FullName;  
  14.             });  
  15.             app.service('myService', function()  
  16.             {  
  17.                 varmyName = "Shiva";  
  18.                 this.FirstName = function()   
  19.                 {  
  20.                     return myName;  
  21.                 }  
  22.                 this.FullName = myName + " " + "shukla"  
  23.             });  
  24.         </script>  
  25. </head>  
  26. <body ng-app="app">  
  27.     <p>AngularJS Service</p>  
  28.     <div ng-controller="MemberController">  
  29.         <p>  
  30.             FirstName: {{FirstName}}  
  31.         </p>  
  32.         <p>  
  33.             FullName: {{FullName}}  
  34.         </p>  
  35.         </div>  
  36.         </body>  
  37.   
  38. </html>  
Output

output

When to use: It is a singleton object. Use it when you need to share a single object across the application.

Provider:

A provider is used to create a configurable service object. It returns value by using $get () function, $provide service has a number of methods for registering components with the $injector.
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Provider Demo</title>  
  6.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">  
  7.         </script>  
  8.         <script>  
  9.             var app = angular.module('app', []);  
  10.             app.config(["myProviderServiceProvider", function(myProviderService)   
  11.              {  
  12.                 myProviderService.set("shiva", "shukla");  
  13.             }]);  
  14.             app.controller("MemberController", function($scope, myProviderService)   
  15.             {  
  16.                 $scope.FirstName = myProviderService.FirstName();  
  17.                 $scope.LastName = myProviderService.LastName();  
  18.                 $scope.FullName = myProviderService.FullName;  
  19.             });  
  20.             app.provider('myProviderService', function()  
  21.              {  
  22.                 var myFName = "Shiva";  
  23.                 var myLName = "Shukla";  
  24.                 return {  
  25.                     set: function(fName, lName)   
  26.                   {  
  27.                         myFName = fName;  
  28.                         myLName = lName;  
  29.                     },  
  30.                     $get: function()  
  31.                   {  
  32.                         functiongetFName()  
  33.                         {  
  34.                             returnmyFName;  
  35.                         }  
  36.                         functiongetLName()  
  37.                         {  
  38.                             returnmyLName;  
  39.                         }  
  40.                         return  
  41.                         {  
  42.                             FullName: myFName + " " + myLName,  
  43.                             FirstName: getFName,  
  44.                             LastName: getLName  
  45.                         };  
  46.                     }  
  47.                 };  
  48.             });  
  49.         </script>  
  50. </head>  
  51. <body ng-app="app">  
  52.     <p>AngularJS Provider</p>  
  53.   
  54.   
  55.     <div ng-controller="MemberController">  
  56.         <p>  
  57.             FirstName: {{FirstName}} and LastName : {{LastName}}  
  58.         </p>  
  59.         <p>  
  60.             FullName: {{FullName}}  
  61.         </p>  
  62.         </div>  
  63.   
  64.         </body>  
  65.   
  66. </html>  
Output

output

When to use:

When you need to provide module-wise configuration for your service object before making it available.

Value:

You can also register a function as a value. Values are typically used as configuration which is injected into factories, services or controllers.
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Value Demo</title>  
  6.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">  
  7.         </script>  
  8.         <script>  
  9.             var app = angular.module('app', []);  
  10.             app.controller("MemberController", function($scope, numberValue, stringValue, objectValue)  
  11.             {  
  12.                 $scope.numberValue = numberValue;  
  13.                 $scope.stringValue = stringValue;  
  14.                 $scope.objectValue = objectValue;  
  15.             });  
  16.             app.value("numberValue", 1000);  
  17.             app.value("stringValue", "Hello Word");  
  18.             app.value("objectValue",   
  19.             {  
  20.                 objVal1: true,  
  21.                 objVal2: "My object Value"  
  22.             });  
  23.         </script>  
  24. </head>  
  25. <body ng-app="app">  
  26.     <p>AngularJS Value</p>  
  27.   
  28.     <div ng-controller="MemberController">  
  29.         <p>  
  30.             number Value: {{numberValue}}  
  31.             <br/> string Value: {{stringValue}}  
  32.             <br/> object Value : {{objectValue.objVal1}} and {{objectValue.objVal2}}  
  33.         </p>  
  34.         </div>  
  35.         </body>  
  36.   
  37. </html>  
Output:

output
Constant:

It is like a value. Register a constant service, such as a string, a number, an array, an object or a function, with the $injector. Unlike value it can be injected into a module configuration function and it cannot be overridden by an Angular decorator.
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Constant Demo</title>  
  6.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">  
  7.         </script>  
  8.         <script>  
  9.             var app = angular.module('app', []);  
  10.             app.controller('MemberController', function($scope, myConfig)  
  11.              {  
  12.                 $scope.myConfig = myConfig;  
  13.             });  
  14.             app.constant('myConfig',  
  15.             {  
  16.                 flag: true,  
  17.                 settings: "default"  
  18.             });  
  19.         </script>  
  20. </head>  
  21. <body ng-app="app">  
  22.     <p>AngularJS Constant</p>  
  23.     <div ng-controller="MemberController">  
  24.         <p>  
  25.             flag: {{myConfig.flag}}  
  26.             <br/> settings: {{myConfig.settings}}  
  27.         </p>  
  28.         </div>  
  29.   
  30.         </body>  
  31.   
  32. </html>  
Output:

output

Decorator:

A decorator can modify or encapsulate other providers. There is one exception and that a constant cannot be decorated.
  1. var app = angular.module('app', []);  
  2.   
  3. app.value('movieTitle', 'Airlift');  
  4.   
  5. app.config(function($provide)   
  6. {  
  7.     $provide.decorator('movieTitle', function($delegate)   
  8.     {  
  9.         return $delegate + ' – The rising';  
  10.     });  
  11. });  
  12.   
  13. app.controller('MyController', function(movieTitle)  
  14. {  
  15.     expect(movieTitle).toEqual('Airlift – the rising');  
  16. });  
Summary: 
  • All the providers are instantiated only once. That means that they are all singletons.
  • All the providers except constant can be decorated.
  • A constant is a value that can be injected everywhere. The value of a constant can never be changed.
  • A value is just a simple injectable value.
  • A service is an injectable constructor.
  • A factory is an injectable function.
  • A decorator can modify or encapsulate other providers except a constant.
  • A provider is a configurable factory.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs