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

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

     [java]
     var myApp = angular.module(‘myApp’, []);
     myApp.factory(‘MyService’, function() {
     return {
     message: ‘Test message from MyService.’
     }
     });
     [/java]

   • Use service in the controller

     [java]
     var TestController = function($scope, MyService) {
     $scope.myService = MyService;
     };
     myApp.controller(‘TestController’, [‘$scope’, ‘MyService’, TestController]);
     [/java]

   • Use controller in the code and retrieve data from service “MyService”

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

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

     [java]
     var myApp = angular.module(‘myApp’, []);
     myApp.config([‘$provide’, function($provide) {
     $provide.factory(‘MyService’, function() {
     return {
     message: ‘Test message from MyService.’
     }
     });
     }]);
     [/java]

   • Use service in the controller

     [java]
     var TestController = function($scope, MyService) {
     $scope.myService = MyService;
     };
     myApp.controller(‘TestController’, [‘$scope’, ‘MyService’, TestController]);
     [/java]

   • Use controller in the code and retrieve data from service “MyService”

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

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

     [java]
     myApp.service(‘MyService’, function () {
     this.message = "Test message from MyService.";

     this.reverseMessage = function() {
     return this.message.split(”).reverse().join(”);
     }
     });
     [/java]

   • Use service in the controller

     [java]
     var TestController = function($scope, MyService) {
     $scope.myService = MyService;
     };
     myApp.controller(‘TestController’, [‘$scope’, ‘MyService’, TestController]);
     [/java]

   • Use controller in the code and retrieve data from service “MyService”

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

Hope this helps !!!

Read Further on AngularJS Series

• AngularJS : A “Write Less Do More” JavaScript Framework
• AngularJS : Updating a Label Dynamically with User Input
• AngularJS : Adding Items to a JavaScript List and updating corresponding DOM Dynamically
• AngularJS : Text Suggestions
• AngularJS : Sorting objects on various attributes
• AngularJS : Fetching data from the server
• AngularJS : Multiple Views, Layout Template and Routing
• AngularJS : Implementing Routes And Multiple Views
• Building Intuitive Frontend Interfaces with AngularJS