Understanding Services In AngularJS

Introduction

Service in AngularJS is a function or an object that can be used to share data and the behaviour across the application (controller, directives, filters, other services etc.) or we can say services in AngularJS are objects that are wired together using DI (dependency injection) and it can be used to share and organize code across the application.

We can consider services as a singleton object because their is only one instance of a specific service available during the lifetime of the Angular application. They are instantiated by using the "$injector". Generally they provide an interface to create logical grouping of method together related to a specific function.

There are the following two characteristics of AngularJS services:

• Lazy instantiated: AngularJS application instantiates a service component when any application component depends on it.
  
  
• Singletons: All components, those dependent on a service get a reference to the single instance generated by the service factory.

Structure of Idle AngularJS Application

Separation of concern is the main objective of AngularJS application. Our controller must be responsible for databinding with the view using $scope and contains some business logic. Controller does not contain any logic to fetch the data. AngularJS services manage the data fetching. In AngularJS application, each component has their own responsibilities so that each component can become more testable.



AngularJS internal services

AngularJS internally provides many services that can be used in our application. All the AngularJS internal service start with $ (dollar) sign. $http, $route, $location, $window, $q, etc are useful services provided by AngularJS.

AngularJS custom services

With AngularJS application, we can define our own service and we can use them whenever required. There are many ways to create Services in AngularJS. The following are two very simple ways to create service.

1. Using service keyword
   
   Use the "service" keyword is the easiest way to create Service in AngularJS application. In the following code snippet, second parameter is service function in which we define the behaviour of the service. Once we define the service, we can use this service anywhere by injecting this service as dependency.
   
   1. Defining service without dependency:
   3. var app = angular.module('myapp', []);
   5. app.service('myTestService', function(){
   6. // write your service here
   7. // define variable and methods
   9. });
   Defining service with dependency:
   
   1. var app = angular.module('myapp', []);
   3. app.service('myTestService', ['$http', function($http){
   4. // write your service here
   5. // define variable and methods
   7. }]);
2. Using factory method
   
   Instead of defining the service directly using the "Service" keyword of the Angular module we can also use the Factory method and services will be created on request when defined by a factory function. The purpose of the service factory is to generate the single object that can be used for the rest of the application.
   
   Defining service without dependency:
   
   1. var app = angular.module('myapp', []);
   3. app. factory ('myTestService', function(){
   4. // write your service here
   5. // define variable and methods
   7. });
   Defining service with dependency.
   
   1. var app = angular.module('myapp', []);
   3. app.factory('myTestService', ['$http', function($http){
   4. // write your service here
   5. // define variable and methods
   7. }]);