In AngularJS, there are three ways to register a service in a module.<\/p>\n
We can register a service via Angular module\u2019s “factory” function. This is commonly use to register a service.<\/p>\n
[java]
\nvar myApp = angular.module(‘myApp’, []);
\nmyApp.factory(‘MyService’, function() {
\n\treturn {
\n\t\tmessage: ‘Test message from MyService.’
\n\t}
\n});
\n[\/java]<\/p>\n<\/li>\n
[java]
\nvar TestController = function($scope, MyService) {
\n $scope.myService = MyService;
\n};
\nmyApp.controller(‘TestController’, [‘$scope’, ‘MyService’, TestController]);
\n[\/java]<\/p>\n<\/li>\n
[html]
\n<div ng-controller="TestController">
\n <p>{{myService.message}}<\/p>
\n<\/div>
\n[\/html]<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
We can register a service via Angular<\/a> module\u2019s “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.<\/p>\n [java] [java] [html] 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\u2019t return any object.<\/p>\n [java] this.reverseMessage = function() { [java] [html] Hope this helps !!!<\/p>\n Read Further on AngularJS Series<\/span><\/p>\n 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 Via Module’s Factory Function We can register a service via Angular module\u2019s “factory” function. This is commonly use to register a service. Registering service in the module [java] var myApp = angular.module(‘myApp’, […]<\/p>\n","protected":false},"author":103,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":7},"categories":[1439,3429],"tags":[3955,955,4697],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/20285"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/103"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=20285"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/20285\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=20285"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=20285"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=20285"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
\nvar myApp = angular.module(‘myApp’, []);
\nmyApp.config([‘$provide’, function($provide) {
\n\t$provide.factory(‘MyService’, function() {
\n\t\treturn {
\n\t\t\tmessage: ‘Test message from MyService.’
\n\t\t}
\n\t});
\n}]);
\n[\/java]<\/p>\n<\/li>\n
\nvar TestController = function($scope, MyService) {
\n $scope.myService = MyService;
\n};
\nmyApp.controller(‘TestController’, [‘$scope’, ‘MyService’, TestController]);
\n[\/java]<\/p>\n<\/li>\n
\n<div ng-controller="TestController">
\n <p>{{myService.message}}<\/p>
\n<\/div>
\n[\/html]<\/p>\n<\/li>\n<\/ul>\n<\/li>\nRegistering Service by service function<\/h3>\n
\n
\nmyApp.service(‘MyService’, function () {
\n this.message = "Test message from MyService.";<\/p>\n
\n return this.message.split(”).reverse().join(”);
\n }
\n});
\n[\/java]<\/p>\n<\/li>\n
\nvar TestController = function($scope, MyService) {
\n $scope.myService = MyService;
\n};
\nmyApp.controller(‘TestController’, [‘$scope’, ‘MyService’, TestController]);
\n[\/java]<\/p>\n<\/li>\n
\n<div ng-controller="TestController">
\n <h1>Message: {{myService.message}}<\/h1>
\n <h1>Reversed message: {{myService.reverseMessage()}}<\/h1>
\n<\/div>
\n[\/html]<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n