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

08 / Jun / 2015 by Dhanendra Kumar 2 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 (2)

  1. Gopika

    Thanks for sharing a great article on AngularJS!!

    I think there are lots of people who struggle to learn AngularJS.

    Really it will be helpful for both beginners and experienced professional. Your information is very clear.

    Along with your post, I have also tried my best to write on AngularJS about services and factory in AngularJS which will be helpful to people who are stepping into AngularJS.

    Reply
  2. 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 -