Angular Service

Services in angular are singletons, which are objects that are instantiated only once per app.

Service holds some business logic. Service functions can be called from anywhere; Controllers, Directive, Filters etc. Thus we can divide our application in logical units.

With Services we can achieve following two of SOLID principles

i. Single Responsibility - Single responsibility principle says that every object should have a single responsibility.

So we need to create different services for different responsibilities.

ii.  Dependency Inversion - Dependency Inversion says that objects should depend on abstractions, and not on concrete implementation.

E.g. In C# we can say that our objects should depend on interfaces instead of classes.

This helps to create loosely coupled application and makes unit testing much easier..

Angular services are:

• Lazily instantiated – Angular only instantiates a service when an application component depends on it.
• Singletons – Each component dependent on a service gets a reference to the single instance generated by the service factory.

Creating your own Service in Angular

1. Define your service using factory('methodname',function(){}) method of angular.

                This method has two parameters

                i. Name of Service and

                ii. Function which returns the object which represents this service

E.g.

productDemoModule.factory('ProductDataService', function () {

    return {

        getData: function () { return [{ name: 'Product1', price: 100 }, { name: 'Product2', price: 200 }]; },

    }

});

Here i have created a service named , It has a function getData() which returns product details. Currently it returns static data for demo purpose, in your case you can make ajax calls using built in angular services like $http/$resource and retrieve data and return it.

Also you can add required functions and properties similar to getData function and access it later as explained below.

By using the factory method we are registering our service with Angular. This allows Angular’s dependency injection container to inject an instance of our service when we request it in other places.

Using your service

Angularjs provides out of the box support for dependency management.

To use an Angular service, you add it as a dependency for the component (controller, service, filter or directive) that depends on the service. Angular's dependency injection subsystem takes care of the rest.

var productDemoModule = angular.module('productDemoModule', []);

productDemoModule.controller('ProductController', function ($scope, ProductDataService) {

    $scope.products = ProductDataService.getData();   

});

Here we just pass our service as parameter and since we have already registered our service with angular using factory() method shown above angular will inject instance of our service and we don't have to care about instantiating our service. We just simply access functions and properties defined in service.

You can  download code here for this article.

Also i have created a sample code to demonstrate how to use built in services of angular inside our own service. I have demonstrated that using $cookieStore service. You can download this code here.

Also there are other ways to create angular service using service() method or using $provide which i will explain in some other post.

Hope this help you start creating your own service. 

Your comments & feedback will help me to improve my blog :) so feel free to give your comments.