In the previous tutorials we have discussed about what is AngularJs service, what are all AngularJs pre-defined service and how we can use them in our application.
In this tutorials, we are going to learn how to create our own AngularJs custom service with an example.
How to Create AngularJs Custom Service ?
In AngularJs, we can create our own service by using the module object like below.
var myApp = angular.module(“myApp”,[]);
Here the myApp is an reference of the module object. This module object provides two different functions to create user defined services.
- service()
- factory()
AngularJs Custom Service using service() :
We can create a custom service using service() function like below.
myApp.service(“serviceName”,function(){
// Declare variables or functions with this keyword.
})
How to use custom service in controller :
If we want to make use of the custom service in controller, we need to specify the service details at the time of creating the controller it self.
Ex:
myApp.controller(“controllerName”,function($scope,serviceName){
// Here you can access the members of service by using service name.
})
Example For AngularJs Custom Service :
In this example we are going to write a custom service to do the basic mathematical operations, for all addition, subtraction,multiplication and division. And that custom serviceĀ can be called from angularjs controller.
Create app.js :
Create an AngularJs module.
var myApp = angular.module("myApp", []);
Create math_service.js
myApp.service("mathService", function() {
this.add = function(x, y) {
return parseInt(x) + parseInt(y);
}
this.sub = function(x, y) {
return parseInt(x) - parseInt(y);
}
this.mul = function(x, y) {
return parseInt(x) * parseInt(y);
}
this.div = function(x, y) {
return parseInt(x) / parseInt(y);
}
})
Create math_controller.js
myApp.controller( "mathController", function($scope, mathService) {
$scope.x = 10;
$scope.y = 30;
$scope.result = 0;
$scope.calcAdd = function() {
$scope.result = mathService.add($scope.x, $scope.y)
}
$scope.calcSub = function() {
$scope.result = mathService.sub($scope.x, $scope.y)
}
$scope.calcMul = function() {
$scope.result = mathService.mul($scope.x, $scope.y)
}
$scope.calcDiv = function() {
$scope.result = mathService.div($scope.x, $scope.y)
}
})
Create service_example.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJs Services Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="app_module.js"></script>
<script src="math_service.js"></script>
<script src="mathController.js"></script>
</head>
<body ng-app="myApp">
<h1>AngularJs Services Example</h1>
<div ng-controller="mathController">
<table>
<tr>
<td>First Value :
<td>
<td>
<input type="text" ng-model="x" />
<td>
</tr>
<tr>
<td>Second Value :
<td>
<td>
<input type="text" ng-model="y" />
<td>
</tr>
<tr>
<td>Result is :
<td>
<td><b>{{result}}</b></td>
<td>
</tr>
</table>
<input type="button" ng-click="calcAdd()" value="Addition" />
<input type="button" ng-click="calcSub()" value="Substraction" />
<input type="button" ng-click="calcMul()" value="Multiply" />
<input type="button" ng-click="calcDiv()" value="Division" />
<br> </div>
</body>
</html>
Output :
[advanced_iframe securitykey=”85899c43cd5d45b9ec5729b5189d1961d89f90d9″ src=”http://nhk.e6a.mytemp.website/AngularJsExamples/Angular_Custom_service.html”]
Happy Learning š
