Services in AngularJs

What are Services?

• In traditional sense, we keep the complexity of any activity behind services. 
• Services are singleton objects that are instantiated once per app (by the $injector). 
• $http, for instance, is an example of an AngularJS built-in service that uses browser’s XMLHttpRequest object
• Lazy-loaded(created only when necessary)
• Provide an interface to keep together those methods that relate to a specific function

Why Services?

• Separation of concern is at the heart while designing an AngularJS application.
• Your controller must be responsible for binding model data to views using $scope. It does not contain logic to fetch the data or manipulating it.

Why Need Services?

angular.module('MyController',
function($scope) {
$scope.shouldShowLogin = true;
$scope.showLogin = function() {
$scope.shouldShowLogin = !$scope.shouldShowLogin;
}
$scope.clickButton = function() {
$("#btn span").html("Clicked");
}
$scope.onLogin = function(user) {
$http({
method: 'POST',
url: '/login',
data: {
user: user
}
}).success(function(data) {
// user
})
}
})

angular.module('MyController', 
function($scope, UserSrv) {
// The content can be controlled by
// directives

$scope.onLogin = function(user) {
UserSrv.runLogin(user);
}
})

AngularJS internal services

• AngularJS internally provides many services that we can use in our application,such as
  • $http
  • $window
  • $route
  • $location etc......

module.controller('FooController', function($http){
    //...
});
 
module.controller('BarController', function($window){
    //...
});

Ways To Create Services

• Service
• Factory
• Constant/Value:

Factory()

• Functional Instantiation 
• Return primitive value, object, function
• When declaring factoryName as an injectable argument you will be provided with the value that is returned by invoking the function

Service()

• Pseudo-classical instantiation
• Return object
• When declaring serviceName as an injectable argument you will be provided with an instance of the function

new FunctionYouPassedToService()

Factory()

Service()

module.service('MyService', function() {
     this.method1 = function() {
            //..
        }
     this.method2 = function() {
            //..
        }
});

module.factory('MyService', function() {
     var factory = {}; 
     factory.method1 = function() {
            //..
        }
     factory.method2 = function() {
            //..
        }
     return factory;
});

Promises and other asynchronous functions

angular.module('myApp')
    .service('myService', ['$http', '$q', function($http, $q){
      var deferObject,
      this.getPromise: function() {
              var promise       =  $http.get('/someURL'),
              deferObject =  deferObject || $q.defer();
                     promise.then(
                      // OnSuccess function
                      function(answer){
                        // This code will only run if we have a successful promise.
                        deferObject.resolve(answer);
                      },
                      // OnFailure function
                      function(reason){
                        // This code will only run if we have a failed promise.
                        deferObject.reject(reason);
                      });
              return deferObject.promise;
          }
       };
  }]);

Constant/Value

The major difference between the value() method and the constant() method is that you can inject a constant into a config function, whereas you cannot inject a value

angular.module('App').constant('key', value);
angular.module('App').value('key', value);

angular.module('App', []).  
  config(function($provide) {
    $provide.constant('key', value);
  };

Constant/Value

Typically, a good rule of thumb is that we should use value() to register a service object or function, while we should use constant() for configuration data.

Future Link:

http://lostechies.com/gabrielschenker/2014/01/14/angularjspart-9-values-and-constants/