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/
Services
By mohammad sirajuddin Rayyan
Services
Services in AngularJS
- 190