{"id":51096,"date":"2019-03-06T12:00:56","date_gmt":"2019-03-06T06:30:56","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=51096"},"modified":"2020-01-31T10:50:06","modified_gmt":"2020-01-31T05:20:06","slug":"angularjs-services","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/angularjs-services\/","title":{"rendered":"Types of AngularJS Services with Examples &#8211; Creating\/Registering Services"},"content":{"rendered":"<div class='__iawmlf-post-loop-links' style='display:none;' data-iawmlf-post-links='[{&quot;id&quot;:1629,&quot;href&quot;:&quot;https:\\\/\\\/docs.angularjs.org\\\/guide\\\/services&quot;,&quot;archived_href&quot;:&quot;http:\\\/\\\/web-wp.archive.org\\\/web\\\/20250502232355\\\/https:\\\/\\\/docs.angularjs.org\\\/guide\\\/services&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2025-12-09 14:17:39&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2025-12-15 10:32:42&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2025-12-19 14:10:39&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-01-05 15:23:26&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-01-29 08:14:49&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-02-03 07:19:58&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-02-09 08:04:59&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-02-20 10:13:45&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-03-17 19:23:22&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-03-27 05:47:50&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-04-03 13:47:43&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-04-14 05:15:41&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-05-01 15:55:48&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-05-09 12:24:16&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-05-12 12:45:50&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-05-27 03:20:46&quot;,&quot;http_code&quot;:206}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-05-27 03:20:46&quot;,&quot;http_code&quot;:206},&quot;process&quot;:&quot;done&quot;}]'><\/div>\n<p>Earlier we talked about <a href=\"https:\/\/data-flair.training\/blogs\/angularjs-filter\/\"><strong>Filters in\u00a0AngularJS<\/strong><\/a>. In this article, we will discuss what is AngularJS Services with its types: built-in and custom services. Along with this, we will learn how to create and register services in AngularJS with an example.<\/p>\n<p><em>AngularJs service is a function, which can use for the business layer of an application<\/em>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-51165\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/03\/AngularJS-Services-01.jpg\" alt=\"What are Angular Services\" width=\"1201\" height=\"629\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/03\/AngularJS-Services-01.jpg 1201w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/03\/AngularJS-Services-01-150x79.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/03\/AngularJS-Services-01-300x157.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/03\/AngularJS-Services-01-768x402.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/03\/AngularJS-Services-01-1024x536.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/03\/AngularJS-Services-01-520x272.jpg 520w\" sizes=\"auto, (max-width: 1201px) 100vw, 1201px\" \/><\/p>\n<h2>What is AngularJS Services?<\/h2>\n<p>AngularJs service is a function, which can use for the business layer of an application. It is like a constructor function that will invoke only once at runtime with new. Services in AngularJS are stateless and singleton objects because we get only one object in it regardless of which application interface created it.<\/p>\n<p>We can use it to provide functionality in our web application. Each service performs a specific task.<\/p>\n<p><strong>When to use Services in AngularJS?<\/strong><\/p>\n<p>We can use AngularJS services when we want to create things that act as an application interface. It can be used for all those purposes for which constructor is used.<\/p>\n<p><strong>Types of AngularJS Services<\/strong><\/p>\n<p>There are two types of services in angular:<\/p>\n<ol>\n<li><strong>Built-in services<\/strong> &#8211; There are approximately 30 built-in services in angular.<\/li>\n<li><strong>Custom services &#8211;\u00a0<\/strong>In angular if the user wants to create its own service he\/she can do so.<\/li>\n<\/ol>\n<p><strong><a href=\"https:\/\/data-flair.training\/blogs\/angularjs-event\/\">Do you know What are AngularJS Events and list of HTML Event Directives?<\/a><\/strong><\/p>\n<h2>Built-in Services in AngularJS<\/h2>\n<p>They are pre-built services in AngularJS. These services get registered automatically at runtime with the dependency injector. Therefore, by using dependency injector we can easily incorporate these built-in services in our angular application.<\/p>\n<p>The various built-in services are as follows:<\/p>\n<h5>i. $http<\/h5>\n<p>It is a service to communicate with a remote server. It makes an ajax call to the server.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.6.9\/angular.min.js\"&gt;&lt;\/script&gt;\r\n&lt;body&gt;\r\n\r\n&lt;div ng-app=\"demoApp\" ng-controller=\"myController\"&gt;\r\n\r\n&lt;p&gt;Today's welcome message is:&lt;\/p&gt;\r\n\r\n&lt;h1&gt;{{message}}&lt;\/h1&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;p&gt;A page is requested on server by $http, and the response is set as the value of the \"message\" variable.&lt;\/p&gt;\r\n\r\n&lt;script&gt;\r\nvar httpmodule = angular.module('demoApp', []);\r\nhttpmodule.controller('myController', function($scope, $http) {\r\n  $http.get(\"demo.htm\").then(function (response) {\r\n     $scope.message = response.data;\r\n    });\r\n  });\r\n&lt;\/script&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p>Message is:<\/p>\n<p><strong>Hello AngularJS Students<\/strong><\/p>\n<p>A page is requested on a server by $http, and the response is set as the value of the &#8220;message&#8221; variable.<\/p>\n<p><strong><a href=\"https:\/\/data-flair.training\/blogs\/angularjs-mvc\/\">Recommended Reading &#8211; How MVC Works in AngularJS?<\/a><\/strong><\/p>\n<h5>ii. $interval<\/h5>\n<p>It is a wrapper in angular for window.setInterval.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;!DOCTYPE html&gt;\r\n&lt;html ng-app=\"intrApp\"&gt;\r\n\r\n&lt;head&gt;\r\n  &lt;meta charset=\"utf-8\" \/&gt;\r\n  &lt;title&gt;$interval angularjs&lt;\/title&gt;\r\n  &lt;script src=\"https:\/\/code.angularjs.org\/1.3.15\/angular.js\"&gt;          \r\n  &lt;\/script&gt;\r\n  &lt;script src=\"script.js\"&gt;&lt;\/script&gt;\r\n  &lt;\/head&gt;\r\n\r\n  &lt;body ng-controller=\"IntervalController\"&gt;\r\n\r\n    &lt;br \/&gt;&lt;br \/&gt;The value of counter is: {{cnt}}\r\n  &lt;\/body&gt;\r\n  &lt;script&gt;\r\n   var sample = angular.module(\"intrApp\", []);\r\n\r\n    sample.controller(\"IntervalController\", function($scope, $interval) {\r\n\r\n\r\n      $scope.cnt = 0;\r\n\r\n      $scope.increment = function() {\r\n        $scope.cnt += 1;\r\n};\r\n\r\n\r\n      $interval(function() {\r\n        $scope.increment();\r\n      }, 2000);\r\n\r\n      });\r\n    &lt;\/script&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p>The value of the counter is: 0<\/p>\n<h4>But the value gets increased by 1 in every 2milisecond.<\/h4>\n<h5>iii. $timeout<\/h5>\n<p>It is the same as setTimeout function in <strong>javascript<\/strong>. To set a time delay on the execution of a function $timeout is used.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;!DOCTYPE html&gt;\r\n&lt;html ng-app=\"myApp\"&gt;\r\n\r\n&lt;head&gt;\r\n   &lt;script src=\"\/\/code.angularjs.org\/snapshot\/angular.min.js\"&gt;&lt;\/script&gt;\r\n   &lt;script src=\"script.js\"&gt;&lt;\/script&gt;\r\n  &lt;\/head&gt;\r\n   &lt;body ng-controller=\"timeController\"&gt;\r\n    &lt;div&gt;\r\n      &lt;div&gt;Message is displayed afer 3 seconds : {{msg}}&lt;\/div&gt;\r\n   &lt;\/div&gt;\r\n   &lt;script&gt;\r\nvar sample = angular.module('myApp', []);\r\nsample.controller('timeController', function($scope, $timeout) {\r\n   $timeout( function(){\r\n      $scope.msg = \"Hey!\";\r\n    }, 3000 ); \r\n });\r\n\r\n   &lt;\/script&gt;\r\n   &lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p>The message is displayed after 3 seconds: Hey!<\/p>\n<h5><strong>iv. $anchorscroll\u00a0<\/strong><\/h5>\n<p>The page which specifies by an anchor in $location.hash() scrolls using $anchorscroll.<\/p>\n<h5><strong>v. $animate\u00a0<\/strong><\/h5>\n<p>It consists of many DOM (Document Object Model) utility methods that provide support for animation hooks.<\/p>\n<p><strong><a href=\"https:\/\/data-flair.training\/blogs\/dom-in-angularjs\/\">Also, see Major Directives for AngularJS HTML DOM<\/a><\/strong><\/p>\n<h5><strong>vi. $animateCss<\/strong><\/h5>\n<p>It will perform animation only when ngAnimate includes, by default.<\/p>\n<h5><strong>vii. $cacheFactory\u00a0<\/strong><\/h5>\n<p>It is a factory that constructs cache objects. It puts the key-value pair and retrieves the key-value pair. Also, it can provide access to other services.<\/p>\n<h5><strong>viii. $templateCache\u00a0<\/strong><\/h5>\n<p>Whenever a template is used for the first time, it is loaded in template cache. It helps in quick retrieval.<\/p>\n<h5><strong>ix. $compile<\/strong><\/h5>\n<p>We can compile HTML string or DOM in the template by it. Also, it produces a template function which will use to link template and scope together.<\/p>\n<h5><strong>x. $controller <\/strong><\/h5>\n<p>By using a $controller, we can\u00a0instantiate <a href=\"https:\/\/data-flair.training\/blogs\/angularjs-controller\/\"><strong>Angular controller<\/strong><\/a> components.<\/p>\n<h5><strong>xi. $document <\/strong><\/h5>\n<p>J-query wrapped the reference to the window. Document element is specified by it.<\/p>\n<h5><strong>xii. $exceptionHandler<\/strong><\/h5>\n<p>Any uncaught exception in an angular expression is sent to this service.<\/p>\n<h5><strong>xiii. $filter <\/strong><\/h5>\n<p>Use to format the data for displaying to the user.<\/p>\n<h5><strong>xiv. $httpParamSerializer <\/strong><\/h5>\n<p>It converts an object to a string.<\/p>\n<h5><strong>xv. $httpParamSerializerJQLike <\/strong><\/h5>\n<p>We can sort Params in alphabetic order. It follows j-query\u2019s param() method logic.<\/p>\n<h5><strong>xvi. $xhrFactory <\/strong><\/h5>\n<p>XMLHttpRequest objects is created using factory function.<\/p>\n<h5><strong>xvii. $httpBackend <\/strong><\/h5>\n<p>Browser incompatibilities can be handled using it.<\/p>\n<h5><strong>xviii. $inerpolate<\/strong><\/h5>\n<p>Use for data binding by HTML $compile service.<\/p>\n<p><strong><a href=\"https:\/\/data-flair.training\/blogs\/data-binding-in-angularjs\/\">Let&#8217;s revise\u00a02 Different types of Data Binding in AngularJS<\/a><\/strong><\/p>\n<h5><strong>xix. $locale <\/strong><\/h5>\n<p>For various angular components, localization rules can be provided using $locale.<\/p>\n<h5><strong>xx. $location<\/strong><\/h5>\n<p>URL in the address bar of a browser is parsed by it and then the URL is made available to your application. Changes to the URL in the address bar is reflected in $location service and vice-versa.<\/p>\n<h5><strong>xxi. $log<\/strong><\/h5>\n<p>It is a console logger.<\/p>\n<h5><strong>xxii. $parse <\/strong><\/h5>\n<p>Use to convert Angular expression into a function using $parse.<\/p>\n<h5><strong>xxiii. $q<\/strong><\/h5>\n<p>A function can run asynchronously using $q and its return value, which will use when they finish the processing.<\/p>\n<h5><strong>xxiv. $rootElement<\/strong><\/h5>\n<p>It is a root element of the angular application.<\/p>\n<h5><strong>xxv. $rootScope<\/strong><\/h5>\n<p>Use in an angular application.<\/p>\n<h5><strong>xxvi. $sceDelegate\u00a0<\/strong><\/h5>\n<p>Use in the backend by $sce.<\/p>\n<h2>Customs Services in AngularJS<\/h2>\n<p>We can create our own service by connecting it with a <a href=\"https:\/\/data-flair.training\/blogs\/angularjs-modules\/\"><strong>module in AngularJS<\/strong><\/a>. And to use it add it as a dependency while defining controller.<\/p>\n<p>Here, in the below code we created a custom service demo.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.6.9\/angular.min.js\"&gt;&lt;\/script&gt;\r\n&lt;body&gt;\r\n&lt;div ng-app=\"myApp\" ng-controller=\"myCtrl\"&gt;\r\n\r\n&lt;p&gt;The octal value of 225 is:&lt;\/p&gt;\r\n&lt;\/div&gt;\r\n&lt;p&gt;A custom service with a method that converts a given number into a octal number.&lt;\/p&gt;\r\n&lt;script&gt;\r\nvar app = angular.module('myApp', []);\r\n\r\napp.service('demo', function() {\r\n  this.myFunc = function (x) {\r\n     return x.toString(8);\r\n   }\r\n});\r\napp.controller('myCtrl', function($scope, demo) {\r\n   $scope.hex = demo.myFunc(225);\r\n});\r\n&lt;\/script&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p>The octal value of 225 is:<\/p>\n<p><strong>377<\/strong><\/p>\n<p>A custom service with a method that converts a given number into an octal number.<\/p>\n<h2>How to Create and Register AngularJS Services?<\/h2>\n<p>We can create angular services by registering it into a module. The module operates services.<\/p>\n<p>In angular JS, there are <strong>three ways to create service in AngularJS.<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-51166\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/03\/Create-and-Register-AngularJS-Services-01.jpg\" alt=\"Three Ways to create services in AngularJS\" width=\"1200\" height=\"628\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/03\/Create-and-Register-AngularJS-Services-01.jpg 1200w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/03\/Create-and-Register-AngularJS-Services-01-150x79.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/03\/Create-and-Register-AngularJS-Services-01-300x157.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/03\/Create-and-Register-AngularJS-Services-01-768x402.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/03\/Create-and-Register-AngularJS-Services-01-1024x536.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/03\/Create-and-Register-AngularJS-Services-01-520x272.jpg 520w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<h4>1. Factory<\/h4>\n<p>Using Modules factory API, we can create service. We can use a factory method to create an object, properties add to it and return the same object.<\/p>\n<p><strong><a href=\"https:\/\/data-flair.training\/blogs\/angularjs-api\/\">Have a Look at 8 Types of Global API&#8217;s with examples<\/a><\/strong><\/p>\n<p><strong>Syntax:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">var sample = angular.module(\"app\", []);\r\n\r\nsample.factory('factoryName',function(){\r\n     return factoryObj;\r\n   });<\/pre>\n<h4>2. Service<\/h4>\n<p>We can use a new keyword to instantiate it, an instance of the function will pass by service. The instance of an object is the service object. Angular JS registers service object.\u00a0Here, we can inject this object into various other components of angular application such as controller, <a href=\"https:\/\/data-flair.training\/blogs\/angularjs-directives\/\"><strong>directives<\/strong><\/a>, services, filters etc.<\/p>\n<p><strong>Syntax<\/strong>:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">var sample = angular.module(\"app\", []);\r\nsample.service('serviceName',function(){ });<\/pre>\n<h4>3. Provider<\/h4>\n<p>We can pass only $provider into the .config function. It uses $get function to return value. It will use before making a service available you want to provide module \u2013wise configuration for the service object.<\/p>\n<p><strong>Syntax:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">var sample = angular.module(\"app\", []);\r\n\/\/ syntax to create a provider\r\nsample.provider('providerName',function(){ });\r\n\/\/syntax to configure a provider\r\nsample.config(function(providerNameProvider){});<\/pre>\n<h2>AngularJS Service v\/s Factory<\/h2>\n<p><strong><a href=\"https:\/\/docs.angularjs.org\/guide\/services\">Service<\/a><\/strong> and factory both are singletons.<\/p>\n<p>AngularJS .Service is like a constructor while .factory is a method that returns a value.<\/p>\n<p>AngularJS .factory() provides us much more power and flexibility, whereas a .service() is the \u201cend result\u201d of a .factory() call.<\/p>\n<h2>Angular Services Example<\/h2>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;!Doctype HTML&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n   &lt;title&gt;AngularJS Services Tutorial&lt;\/title&gt;\r\n   &lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.3.12\/angular.min.js\"&gt;&lt;\/script&gt;\r\n   &lt;script src=\"main.js\"&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;div&gt;\r\n   &lt;div ng-app=\"mainApp\" ng-controller=\"myController\"&gt;\r\n      &lt;p&gt;&lt;b&gt;Message From Service: &lt;\/b&gt;{{serviceMsg}}&lt;\/p&gt;\r\n      &lt;p&gt;&lt;b&gt;Message From Factory: &lt;\/b&gt;{{factoryMsg}}&lt;\/p&gt;\r\n      &lt;p&gt;&lt;b&gt;Message From Provider:&lt;\/b&gt;{{providerMsg}}&lt;\/p&gt;\r\n   &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;script&gt;\r\nvar sample = angular.module('mainApp', []);\r\n\r\n\/\/define a service named myService\r\nsample.service('myService', function () {\r\n   this.message = '';\r\n   this.setMessage = function (newMsg) {\r\n      this.msg = newMsg;\r\n      return this.msg;\r\n   };\r\n});\r\n\r\n\/\/define factory named 'myFactory'\r\nsample.factory('myFactory', function () {\r\n   var obj = {};\r\n   obj.message = '';\r\n   obj.setMessage = function (newMsg) {\r\n      obj.message = newMsg;\r\n   };\r\n  return obj;\r\n});\r\n\r\n\/\/Defining a provider 'configurable'\r\nsample.provider('configurable', function () {\r\n   var returnMessage = '';\r\n   this.setMessage = function (newMsg) {\r\n      returnMessage = newMsg;\r\n   };\r\n   this.$get = function () {\r\n      return {\r\n         message: returnMessage\r\n      };\r\n   };\r\n});\r\n\/\/configuring provider\r\nsample.config(function (configurableProvider) {\r\n   configurableProvider.setMessage(\"Hello, This is Provider here!\");\r\n});\r\n\r\n\/\/defining controller\r\nsample.controller('myController', function ($scope, myService, myFactory, configurable) {\r\n   $scope.serviceMsg = myService.setMessage(\"Hello,This is Service here!\");\r\n\r\n   myFactory.setMessage(\"Hello,This is Factory here! \");\r\n   $scope.factoryMsg = myFactory.message;\r\n\r\n   $scope.providerMsg= configurable.message;\r\n});\r\n&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p>A message From Service: Hello, This is Service here!<\/p>\n<p>Message From Factory: Hello, This is Factory here!<\/p>\n<p>Message From Provider: Hello, This is Provider here!<\/p>\n<h2>Dependencies in Servies<\/h2>\n<p>Like you declare dependencies in a controller, similarly, you can declare dependencies in AngularJS services too. We can declare the dependency in service by specifying them in a factory function signature of service.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">var batch = angular.module('batchModule', []);\r\nbatch.factory('batchLog', ['$interval', '$log', function($interval, $log) {\r\n var msgQueue = [];\r\n\r\n function log() {\r\n  if (msgQueue.length) {\r\n    $log.log('batchLog messages: ', msgQueue);\r\n    msgQueue = [];\r\n   }\r\n  }\r\n  $interval(log, 50000);\r\n\r\n  return function(message) {\r\n    msgQueue.push(message);\r\n}\r\n}]);\r\nbatch.factory('routeTemplateMonitor', ['$route', 'batchLog', '$rootScope',\r\n function($route, batchLog, $rootScope) {\r\n  return {\r\n   startMonitoring: function() {\r\n    $rootScope.$on('$routeChangeSuccess', function() {\r\n      batchLog($route.current ? $route.current.template : null);\r\n     });\r\n   }\r\n  };\r\n}]);<\/pre>\n<h2>Summary<\/h2>\n<p>Hence from the above article, we can conclude that AngularJS services are a chunk of code can re-use to perform a specific task. There are a number of services provided by angular for various tasks and you can create your own services too. You may also, like <strong><a href=\"https:\/\/data-flair.training\/blogs\/angularjs-dependency-injection\/\">AngularJS Dependency Injection Tutorial.<\/a><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Earlier we talked about Filters in\u00a0AngularJS. In this article, we will discuss what is AngularJS Services with its types: built-in and custom services. Along with this, we will learn how to create and register&#46;&#46;&#46;<\/p>\n","protected":false},"author":5,"featured_media":51165,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18153],"tags":[19115,19123,19118,19121,19119,19120,19122,19116,19117],"class_list":["post-51096","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angularjs","tag-angular-services","tag-angularjs-services-example","tag-built-in-services","tag-create-an-service","tag-custom-services","tag-example-of-angularjs-services","tag-register-angularjs-service","tag-services-in-angularjs","tag-types-of-angularjs-services"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Types of AngularJS Services with Examples - Creating\/Registering Services - DataFlair<\/title>\n<meta name=\"description\" content=\"Two types of AngularJS Services: built-in &amp; custom servies with syntax and example, also learn process of creating and registering services, dependency\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/data-flair.training\/blogs\/angularjs-services\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Types of AngularJS Services with Examples - Creating\/Registering Services - DataFlair\" \/>\n<meta property=\"og:description\" content=\"Two types of AngularJS Services: built-in &amp; custom servies with syntax and example, also learn process of creating and registering services, dependency\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/angularjs-services\/\" \/>\n<meta property=\"og:site_name\" content=\"DataFlair\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataFlairWS\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-03-06T06:30:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-01-31T05:20:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/03\/AngularJS-Services-01.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1201\" \/>\n\t<meta property=\"og:image:height\" content=\"629\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"DataFlair Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:site\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DataFlair Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Types of AngularJS Services with Examples - Creating\/Registering Services - DataFlair","description":"Two types of AngularJS Services: built-in & custom servies with syntax and example, also learn process of creating and registering services, dependency","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/data-flair.training\/blogs\/angularjs-services\/","og_locale":"en_US","og_type":"article","og_title":"Types of AngularJS Services with Examples - Creating\/Registering Services - DataFlair","og_description":"Two types of AngularJS Services: built-in & custom servies with syntax and example, also learn process of creating and registering services, dependency","og_url":"https:\/\/data-flair.training\/blogs\/angularjs-services\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2019-03-06T06:30:56+00:00","article_modified_time":"2020-01-31T05:20:06+00:00","og_image":[{"width":1201,"height":629,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/03\/AngularJS-Services-01.jpg","type":"image\/jpeg"}],"author":"DataFlair Team","twitter_card":"summary_large_image","twitter_creator":"@DataFlairWS","twitter_site":"@DataFlairWS","twitter_misc":{"Written by":"DataFlair Team","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/data-flair.training\/blogs\/angularjs-services\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/angularjs-services\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/7f83c342f5d1632d6f7b4b0b0f447823"},"headline":"Types of AngularJS Services with Examples &#8211; Creating\/Registering Services","datePublished":"2019-03-06T06:30:56+00:00","dateModified":"2020-01-31T05:20:06+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/angularjs-services\/"},"wordCount":1145,"commentCount":0,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/angularjs-services\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/03\/AngularJS-Services-01.jpg","keywords":["Angular Services","AngularJS services example","Built-in Services","Create an Service","Custom Services","Example of AngularJS Services","Register angularJS service","Services in AngularJS","Types of AngularjS Services"],"articleSection":["AngularJS Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/angularjs-services\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/angularjs-services\/","url":"https:\/\/data-flair.training\/blogs\/angularjs-services\/","name":"Types of AngularJS Services with Examples - Creating\/Registering Services - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/angularjs-services\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/angularjs-services\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/03\/AngularJS-Services-01.jpg","datePublished":"2019-03-06T06:30:56+00:00","dateModified":"2020-01-31T05:20:06+00:00","description":"Two types of AngularJS Services: built-in & custom servies with syntax and example, also learn process of creating and registering services, dependency","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/angularjs-services\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/angularjs-services\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/angularjs-services\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/03\/AngularJS-Services-01.jpg","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/03\/AngularJS-Services-01.jpg","width":1201,"height":629,"caption":"What are Angular Services"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/angularjs-services\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Home","item":"https:\/\/data-flair.training\/blogs\/"},{"@type":"ListItem","position":2,"name":"AngularJS Tutorials","item":"https:\/\/data-flair.training\/blogs\/category\/angularjs\/"},{"@type":"ListItem","position":3,"name":"Types of AngularJS Services with Examples &#8211; Creating\/Registering Services"}]},{"@type":"WebSite","@id":"https:\/\/data-flair.training\/blogs\/#website","url":"https:\/\/data-flair.training\/blogs\/","name":"DataFlair","description":"Learn Today. Lead Tomorrow.","publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/data-flair.training\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/data-flair.training\/blogs\/#organization","name":"DataFlair","url":"https:\/\/data-flair.training\/blogs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","width":106,"height":48,"caption":"DataFlair"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataFlairWS\/","https:\/\/x.com\/DataFlairWS","https:\/\/www.linkedin.com\/company\/dataflair-web-services-pvt-ltd\/","https:\/\/www.youtube.com\/user\/DataFlairWS"]},{"@type":"Person","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/7f83c342f5d1632d6f7b4b0b0f447823","name":"DataFlair Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/4cf3a74600d131330b8c481d519afd1574093ed89f6d3396a95393ad223eb7cd?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4cf3a74600d131330b8c481d519afd1574093ed89f6d3396a95393ad223eb7cd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4cf3a74600d131330b8c481d519afd1574093ed89f6d3396a95393ad223eb7cd?s=96&d=mm&r=g","caption":"DataFlair Team"},"description":"DataFlair Team creates expert-level guides on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. Our goal is to empower learners with easy-to-understand content. Explore our resources for career growth and practical learning.","url":"https:\/\/data-flair.training\/blogs\/author\/dfteam1\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/51096","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/comments?post=51096"}],"version-history":[{"count":7,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/51096\/revisions"}],"predecessor-version":[{"id":51485,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/51096\/revisions\/51485"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/51165"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=51096"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=51096"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=51096"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}