AngularJs – Custom Service

In this article we’re going to learn why and how to build custom services in AngularJS.

Before talking about service we need to talk about controller responsibilities.

we use controllers to:

  • Setup initial state of $scope.
  • Add behaviors to the $scope.

we DON’T use controllers to:

  • Handle business logic directly.
  • Share code state across controllers.

It’s important to realize early on that your controller should be very thin; meaning, most of the business logic and persistent data in your application should be taken care of or stored in a service.



Singleton Design Pattern

Restricts object to always having a single instance.

  • Each dependent component gets a reference to the same instance.
  • Multiple controllers injected with a Service will have access to the same service instance.

Lazily Instantiated

Only created if an application component declares it as a dependency

if no components in your application are dependent on this service, it will never get created.

Angular provides us with three ways to create and register our own service.

  1. Factory
  2. Service
  3. Provider

When you’re using a Factory you create an object, add properties to it, then return that same object. When you pass this service into your controller, those properties on the object will now be available in that controller through your factory.

Result: When declaring factoryName as an injectable argument you will be provided the value that is returned by invoking the function reference passed to module.factory.

Usage: when we want to create different types of objects depending on scenarios. For example depending on scenario we want to create a simple “Customer” object , or “Customer” with “Address” object or “Customer” with “Phone” object.

Instance: No Instance created. A method pointer is passed

app.controller ("myController", function($scope,myFactory) {
  $scope.Grettings = myFactory.sayHello();
app.factory ("myFactory", function(){
  var factory = {};
   return "Hello World";
 return factory;

When you’re using Service, it’s instantiated with the ‘new’ keyword. Because of that, you’ll add properties to ‘this’ and the service will return ‘this’. When you pass the service into your controller, those properties on ‘this’ will now be available on that controller through your service.

When declaring serviceName as an injectable argument you will be provided with the instance of a function passed to module.service.

Usage: when we have utility or shared functions to be injected like Utility , Logger , Error handler etc.

Instance: global and Shared instance is created.

app.controller ("myController", function($scope,myService) {
  $scope.Grettings = myService.sayHello();
app.service("myService", function(){
 var service = this;
   return "Hello World";
 return factory;

Providers are the only service you can pass into your .config() function. Use a provider when you want to provide module-wide configuration for your service object before making it available.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s