Post
Ask Question

Introduction To AngularJS – Day Sixteen

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:

  1. Introduction to AngularJS – Day 1
  2. Introduction to AngularJS – Day 2
  3. Introduction to AngularJS – Day 3
  4. Introduction to AngularJS – Day 4
  5. Introduction to AngularJS – Day 5
  6. Introduction to AngularJS – Day 6
  7. Introduction to AngularJS – Day 7
  8. Introduction to AngularJS – Day 8
  9. Introduction to AngularJS – Day 9
  10. Introduction to AngularJS – Day 10
  11. Introduction to AngularJS – Day 11
  12. Introduction to AngularJS – Day 12
  13. Introduction to AngularJS – Day 13
  14. Introduction To AngularJS – Day 14
  15. Introduction To AngularJS – Day 15

Services

In AngularJS services are lazily instantiated and singletons. Services are nothing but the constructor. AngularJS provides many built in services. For example:
Services
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:

  1. /// <reference path="angular.min.js" />  
  2. var app = angular.module("myApp", []);  
  3.   
  4. //Creating service  
  5. app.service("mathService", function () {  
  6.   
  7.     this.ADD = function (a, b) {  
  8.         return a + b;  
  9.     };  
  10.   
  11.     this.SUB = function (a, b) {  
  12.         return a - b;  
  13.     };  
  14.   
  15.     this.MULT = function (a, b) {  
  16.         return a * b;  
  17.     };  
  18.   
  19.     this.DIV = function (a, b) {  
  20.         return a / b;  
  21.     };  
  22. });  
The above syntax shows how to create a service in AngularJS. The code shows how to inject service in controller:
  1. //Creating controller & injecteing mathService in controller  
  2. app.controller("myController", function ($scope, mathService) {  
  3.   
  4.     $scope.add = function () {  
  5.         $scope.add_result = mathService.ADD($scope.num1, $scope.num2);  
  6.     };  
  7.   
  8.     $scope.sub = function () {  
  9.         $scope.add_result = mathService.SUB($scope.num1, $scope.num2);  
  10.     };  
  11.   
  12.     $scope.mult = function () {  
  13.         $scope.add_result = mathService.MULT($scope.num1, $scope.num2);  
  14.     };  
  15.   
  16.     $scope.div = function () {  
  17.         $scope.add_result = mathService.DIV($scope.num1, $scope.num2);  
  18.     };  
  19.       
  20. });  
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
  1. /// <reference path="angular.min.js" />  
  2. var app = angular.module("myApp", []);  
  3.   
  4. //Creating service  
  5. app.service("mathService", function () {  
  6.   
  7.     this.ADD = function (a, b) {  
  8.         return parseInt(a) + parseInt(b);  
  9.     };  
  10.   
  11.     this.SUB = function (a, b) {  
  12.         return a - b;  
  13.     };  
  14.   
  15.     this.MULT = function (a, b) {  
  16.         return a * b;  
  17.     };  
  18.   
  19.     this.DIV = function (a, b) {  
  20.         return a / b;  
  21.     };  
  22. });  
  23.   
  24. //Creating controller & injecteing mathService in controller  
  25. app.controller("myController", function ($scope, mathService) {  
  26.   
  27.     $scope.add = function () {  
  28.         $scope.add_result = "Addition of two number is " + mathService.ADD($scope.num1, $scope.num2);  
  29.     };  
  30.   
  31.     $scope.sub = function () {  
  32.         $scope.add_result = "Subtraction of two number is " + mathService.SUB($scope.num1, $scope.num2);  
  33.     };  
  34.   
  35.     $scope.mult = function () {  
  36.         $scope.add_result = "Multiplication of two number is " + mathService.MULT($scope.num1, $scope.num2);  
  37.     };  
  38.   
  39.     $scope.div = function () {  
  40.         $scope.add_result = "Division of two number is " + mathService.DIV($scope.num1, $scope.num2);  
  41.     };  
  42.       
  43. });  
index.html
  1. <!DOCTYPE html>  
  2. <html ng-app="myApp">  
  3. <head>  
  4.     <title>Services in AngularJS</title>  
  5.     <meta charset="utf-8" />      
  6.     <script src="app/angular.min.js"></script>  
  7.     <script src="app/app.js"></script>  
  8. </head>  
  9. <body ng-controller="myController">  
  10.     <h2>Services in AngularJS(MathService Example)</h2>  
  11.     Enter First Number :   <input type="text" ng-model="num1" /><br /><br />  
  12.     Enter Second Number :   <input type="text" ng-model="num2" /><br /><br />  
  13.     <input type="button" value="+" ng-click="add()" />    
  14.     <input type="button" value="-" ng-click="sub()" />    
  15.     <input type="button" value="*" ng-click="mult()" />    
  16.     <input type="button" value="/" ng-click="div()" />  <br /><br />  
  17.     <h3>{{add_result}}</h3>  
  18. </body>  
  19. </html>  
Output:

Output

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

Output
Output
Output
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!
 
Read more articles on AngularJS:


Similar Articles