Introduction
A service in Angular is a component that performs a specific job, like providing a timer, or providing the ability to communicate over HTTP.Normally, Directives will be used in-between the Model and the View, keeping them separate, but allowing them to communicate indirectly and move data back and forth.
If any changes are done in the input in the View, ng-model directive updates Model, and changes in Model are automatically pushed into the presentation of the page, the browser's DOM. Services also allow us to separate concerns, even though it not directly related to a module, it might be logic to communicate over HTTP, or it might be an algorithm to compute the hash of a string, or it might be code that provides validation checks, or code that talks to local storage in the browser, or manage cookies sent from a server.
So, if any logic doesn't set in a Model/View/directive,then Service is the best option as putting logic into that service makes the logic to easily use anywhere else in the application, because Controllers can view Services.
Description
Dependency Injection (DI) connects AngularJS Services which are substitutable objects. Services are mainly used to organise and helps in sharing code across the application and can carry out only specific tasks. AngularJS Services contains many useful functions like
AngularJS provides many in-build services for example,
$http, but a user needs to create own services for most applications. Controllers, Directive, and Filters can call the functions as on when required.
Angular services are categorized into two types:
- Lazily instantiated - This service is called only at the point when an application part relies on upon it.
- Singletons - Each component that is reliant on a service gets a reference to the single occurrence created by the service factory.
$http, $route, $window, $location etc. Every service is responsible for a particular task. For example, $http is responsible to call AJAX to get the server data without reloading a page. In-build services are always prefixed with $ symbol. Description
AngularJS provides many in-build services and can be used in application page. For example,
$window,$http,$location, $route. These services can be utilized inside any controller by simply announcing them as dependencies.
[javascript]
module.controller('SPController', function($http){
//...
});
module.controller('SPController', function($window){
//...
});
[/javascript]
Description
Personal custom services can be defined and used anywhere in application. Custom services can be created in the following two ways.
Method-1: Using service method
[javascript]
module.service('MyService', function() {
this.method1 = function() {
//..
}
this.method2 = function() {
//..
}
});
[/javascript]
Method-2: Using factory method
[javascript]
module.factory('MyService', function() {
var factory = {};
factory.method1 = function() {
//..
}
factory.method2 = function() {
//..
}
return factory;
});
[/javascript]
In above example,
MyService is defined in two different ways. Note that, for .service service, methods are created using this.methodname. And in .factory, a factory object is created and the methods are assigned to it. Example
index.html
[html]
<html>
<head>
<title>Angular JS Services</title>
</head>
<body>
<h2>AngularJS Services</h2>
<div ng-app="spApp" ng-controller="SPController">
<p>Enter a number: <input type="number" ng-model="number" />
<button ng-click="square()">X<sup>2</sup></button>
<p>Result: {{result}}</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<script src="App.js"></script>
<script src="factory.js"></script>
<script src="service.js"></script>
<script src="Controller.js"></script>
</body>
</html>
[/html]
Controller.js
[javascript]
mainApp.controller('SPController', function($scope, CalcService) {
$scope.square = function() {
$scope.result = CalcService.square($scope.number);
}
});
[/javascript]
App.js
[javascript]
var mainApp = angular.module("spApp", []);
[/javascript]
service.js
[javascript]
mainApp.service('CalcService', function(MathService){
this.square = function(a) {
return MathService.multiply(a,a);
}
});
[/javascript]
factory.js
[javascript]
mainApp.factory('MathService', function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b
}
return factory;
});
[/javascript]
Output:
Key Points
- AngularJS Services are connected together through Dependency Injection (DI).
- AngularJS provides many in-build services like $http, $location, $window, $route etc can be utilized inside any controller by simply announcing them as dependencies.
- custom services can be defined and used anywhere in application.