Register Service by Factory, $provide and Service function in AngularJS

08 / Jun / 2015 by Dhanendra Kumar 1 comments

In AngularJS, there are three ways to register a service in a module.

  • Module’s Factory Function
  • Module’s Config via $provide
  • Module’s Service Function
  1. Via Module’s Factory Function

    We can register a service via Angular module’s “factory” function. This is commonly use to register a service.

    • Registering service in the module

      var myApp = angular.module('myApp', []);
      myApp.factory('MyService', function() {
      	return {
      		message: 'Test message from MyService.'
      	}
      });
      
    • Use service in the controller

      var TestController = function($scope, MyService) {
         $scope.myService = MyService;
      };
      myApp.controller('TestController', ['$scope', 'MyService', TestController]);
      
    • Use controller in the code and retrieve data from service “MyService”

      <div ng-controller="TestController">
         <p>{{myService.message}}</p>
      </div>
      


  2. Via Module’s Config via $provide

    We can register a service via Angular module’s “config” function. This makes service to be configurable via $get function which is called once when service instance is created (because services by default are Singletons). This is often used in mocking service in unit tests.

    • Registering service in the module

      var myApp = angular.module('myApp', []);
      myApp.config(['$provide', function($provide) {
      	$provide.factory('MyService', function() {
      		return {
      			message: 'Test message from MyService.'
      		}
      	});
      }]);
      
    • Use service in the controller

      var TestController = function($scope, MyService) {
         $scope.myService = MyService;
      };
      myApp.controller('TestController', ['$scope', 'MyService', TestController]);
      
    • Use controller in the code and retrieve data from service “MyService”

      <div ng-controller="TestController">
         <p>{{myService.message}}</p>
      </div>
      


  3. Registering Service by service function

    A service function is a constructor function, it creates the object using “new” keyword. We can add properties and functions to a service object by using “this” keyword and it doesn’t return any object.

    • Registering service in the Angular module

      myApp.service('MyService', function () {
              this.message = "Test message from MyService.";
      
              this.reverseMessage = function() {
                  return this.message.split('').reverse().join('');
              }
      });
      
    • Use service in the controller

      var TestController = function($scope, MyService) {
         $scope.myService = MyService;
      };
      myApp.controller('TestController', ['$scope', 'MyService', TestController]);
      
    • Use controller in the code and retrieve data from service “MyService”

      <div ng-controller="TestController">
         <h1>Message: {{myService.message}}</h1>
         <h1>Reversed message: {{myService.reverseMessage()}}</h1>
      </div>
      

Hope this helps !!!

Tag -

Angular
FOUND THIS USEFUL? SHARE IT

comments (1 “Register Service by Factory, $provide and Service function in AngularJS”)

  1. Sunil Garg

    Can you please explain what is the benefit to register service using $provide with example and how can we configure using get ?

    Reply

Leave a comment -