Introduction To AngularJS – Day Sixteen

Jeetendra Gund
Apr 28, 2016
4.4k
0
0
Article

In this 16th day of the AngularJS article series, we are going to learning next key players/concept of AngularJS, understanding the concept of Services in AngularJS. Before moving to key players/concepts of AngularJS, please read my previous articles:

Services

In AngularJS services are lazily instantiated and singletons. Services are nothing but the constructor. AngularJS provides many built in services. For example:

Singletons that perform re-usable task:

Ajax Calls
Business rules
Calculations
Share data between controllers
Used to make RESTful calls
Used to handle custom logic

Syntax:

/// <reference path="angular.min.js" />
var app = angular.module("myApp", []);
//Creating service
app.service("mathService", function () {
this.ADD = function (a, b) {
return a + b;
};
this.SUB = function (a, b) {
return a - b;
};
this.MULT = function (a, b) {
return a * b;
};
this.DIV = function (a, b) {
return a / b;
};
});

The above syntax shows how to create a service in AngularJS. The code shows how to inject service in controller:

//Creating controller & injecteing mathService in controller
app.controller("myController", function ($scope, mathService) {
$scope.add = function () {
$scope.add_result = mathService.ADD($scope.num1, $scope.num2);
};
$scope.sub = function () {
$scope.add_result = mathService.SUB($scope.num1, $scope.num2);
};
$scope.mult = function () {
$scope.add_result = mathService.MULT($scope.num1, $scope.num2);
};
$scope.div = function () {
$scope.add_result = mathService.DIV($scope.num1, $scope.num2);
};
});

Example:

In the following example we created a module, service and controller to inject the service in controller and a view to display.

app.js

/// <reference path="angular.min.js" />
var app = angular.module("myApp", []);
//Creating service
app.service("mathService", function () {
this.ADD = function (a, b) {
return parseInt(a) + parseInt(b);
};
this.SUB = function (a, b) {
return a - b;
};
this.MULT = function (a, b) {
return a * b;
};
this.DIV = function (a, b) {
return a / b;
};
});
//Creating controller & injecteing mathService in controller
app.controller("myController", function ($scope, mathService) {
$scope.add = function () {
$scope.add_result = "Addition of two number is " + mathService.ADD($scope.num1, $scope.num2);
};
$scope.sub = function () {
$scope.add_result = "Subtraction of two number is " + mathService.SUB($scope.num1, $scope.num2);
};
$scope.mult = function () {
$scope.add_result = "Multiplication of two number is " + mathService.MULT($scope.num1, $scope.num2);
};
$scope.div = function () {
$scope.add_result = "Division of two number is " + mathService.DIV($scope.num1, $scope.num2);
};
});

index.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Services in AngularJS</title>
<meta charset="utf-8" />
<script src="app/angular.min.js"></script>
<script src="app/app.js"></script>
</head>
<body ng-controller="myController">
<h2>Services in AngularJS(MathService Example)</h2>
Enter First Number : <input type="text" ng-model="num1" /><br /><br />
Enter Second Number : <input type="text" ng-model="num2" /><br /><br />
<input type="button" value="+" ng-click="add()" />
<input type="button" value="-" ng-click="sub()" />
<input type="button" value="*" ng-click="mult()" />
<input type="button" value="/" ng-click="div()" /> <br /><br />
<h3>{{add_result}}</h3>
</body>
</html>

Output:

Output

Now, enter value in text box and click on button you want like ‘+, -, *, /’ and you get the result as follows:

Output

Great, Services in AngularJS with example created successfully!

Summary

I hope that beginners as well as students understand the concept of Services in AngularJS with Example. If you have any suggestions regarding this article, then please contact me. Stay tuned for other concepts of AngularJS coming soon!

Thanks for reading. Learn it! Share it!