Concepts and Usage of Services in Angular

In the last post, we learned how the directives in Angular can make our life easy. In this post, we will look in to Angular services and learn how do they work and when can they be useful.

Services:

Like controllers and directives, services are also functions defined on an angular module. The syntax of declaring a service is also exactly similar to them. Below is an example of Angular service:

angular.module('module' , [ ]);    //module declaration

angular.module('module').service('MyCustomService', function(){

});  //service declaration

Services in angular are instantiated, which means the function provided to a service is not simply called as an regular function but is called as an constructor function. Hence we always ten to use 'this' while declaring a service function. Consider below example:

angular.module('module').service('MyCustomService', function(){

//function to be called
this.firstFunction = function(){
 //some code logic here
return something;   //return a variable or object

this.secondFunction = function(){
 //some code logic here
return something;   //return a variable or object

});

As shown above, services can be used to organise or share code across the app. You can use service to keep together the functions pertaining to a common functionality.

How to use services:

Like every other thing in Angular, services can be injected into any of your controller, directives or even the run block of the application. (Please note that service cannot be injected in to the config block of your app, as during the config phase services are yet to be compiled and no instance of any service is available). Below is the example of using the service defined above:

angular.module('module').controller(function($scope, MyCustomService){

//using function from the service
 $scope.newVariable = MyCustomService.firstFunction();

});

Important things about the services to note:

• Services are lazily loaded, which means they are only instantiated when first required. As soon as angular encounters a service as an injectable to any module, it instantiates the service and makes its function available.
• Services in Angular are singleton function, which means that they are instantiated only once and all subsequent calls refers to the original instance.
• Like any controller or directives, you can also inject components into your services. Its worth noting that injecting the $scope object into a service do not make any sense, as there is no scope associated with the services. However $rootScope service or any other built-in or custom services can be injected while creating a new service

When to use services:

•  As explained above, you can use services to organise a particular part of your common functionalities.
• You can also think of using services to share data across the controllers. As the services are available across the app, the data stored in services can be used in various controllers by simply injecting the service in each one of them.
• Also you might want to create a service for the functionalities which are required throughout the application. 
• Services are really handy for making all your http calls at a common place. You can pass in the URLs and objects to your service and can return the obtained data.
• Maintaining the data like Login details, user identity in a service make exact sense. Since these are required at various places in the app, they can be easily accessed from a common service.

This is enough to kick start you to write and use an angular service. Make it a habit of writing the services to organise your code, as it makes the development easier and also solves many issues related to data sharing across your app.