AngularJS services

AngularJs services are javaScript function that perform a specific tasks only. Using dependency injection mechanism services are normally attached.

AngularJS provides some build in services i.e. $http, $route, $window, $location etc where each service is responsible for different tasks.

For example, $http is used for ajax call, $route is for routing information.

There are two ways by which we can create service:
– factory
– service

Following example is showing above mentioned directives:

<html>
<head>
<title>AngularJS services</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<h2>AngularJS services</h2>
<div ng-app="myApp" ng-controller="CubeController">
<p>Number: <input type="number" ng-model="number" />
<button ng-click="cube()">X<sup>3</sup></button>
<p>Output: {{output}}</p>
</div>
<script>
var myApp = angular.module("myApp", []);
myApp.factory('CubeMathService', function() {
var factory = {};
factory.multiply = function(a, b, c) {
return a * b * c;
}
return factory;
});

myApp.service('CubeService', function(CubeMathService){
this.cube = function(a) {
return CubeMathService.multiply(a,a,a);
}
});

myApp.controller('CubeController', function($scope, CubeService) {
$scope.cube = function() {
$scope.output = CubeService.cube($scope.number);
}
});
</script>
</body>
</html>

OutPut:

AngularJS services

Number: X³
Output: 125