Post
Ask Question

Services In Angular

Services are among the strongest features of AngularJS. It is mainly concerned with the reusability of the code. The Angular Services object has properties and method objects just like any other JavaScript object. The Angular JS Services make the application more manageable and testable.

Angular provides several useful services like $http, $log, $filter etc. There are many more others built-in services provided by Angular. We can also create our own Angular Service.

Note
The built-in services provided by Angular are always prefixed with a dollar ($) sign.

Use of $timeout Service

Step 1

Create a blank project.

Step 2

Create a blank HTML Page.

Step 3

In the Head section of the HTML page, set the CDN link of AngularJS.

  1. <head>  
  2.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js></script>  
  3. </head>  

Step 4

Now, create a script section under head tag to write AngularJS script.

  1. <script>  
  2.     var app = angular.module('myApp', []);  
  3.     app.controller('myCtrl', function($scope, $timeout) {  
  4.         $scope.myHeader = "Hello friends!";  
  5.         $timeout(function() {  
  6.             $scope.message = "Hope you enjoying Angular?";  
  7.         }, 4000);  
  8.     });  
  9. </script>  

In the above code, we simply passed the $timeout service to our controller and set the time out duration (in milliseconds).

Step 5

Create a div section within the body and register your ng-app and ng-controller.

  1. <div ng-app="myApp" ng-controller="myCtrl">  
  2.     <p>This header will change after four seconds </p>  
  3.     <h1>{{message}}</h1>  
  4. </div>  

How to create your own service

In this program, we will add a space after every Upper case letter in the output

HTML Page

  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.   
  4. <head>  
  5.     <title></title>  
  6.     <script src="scripts/angular.js"></script>  
  7.     <script src="scripts/MyScript.js"></script>  
  8.     <script src="scripts/StringTransformationService.js"></script>  
  9.     <link href="Styles.css" rel="stylesheet" /> </head>  
  10.   
  11. <body ng-app="myModule">  
  12.     <div ng-controller="myController">  
  13.         <table>  
  14.             <tr>  
  15.                 <td>Your String</td>  
  16.                 <td><input type="text" ng-model="input" /> </td>  
  17.             </tr>  
  18.             <tr>  
  19.                 <td>Result</td>  
  20.                 <td><input type="text" ng-model="output" /></td>  
  21.             </tr>  
  22.             <tr>  
  23.                 <td></td>  
  24.                 <td> <input type="button" ng-click="ChangeString(input)" value="Prcess" /> </td>  
  25.             </tr>  
  26.         </table>  
  27.     </div>  
  28. </body>  
  29.   
  30. </html>  

MyScript.js Page

In the above code, we’ve created our controller and passed our own custom service named “MyStringTransformationService”. We’ve also created a function that will call the service and that function will receive one argument as “input”].

Now, we will create our own custom service.

  1. Add a JS file to the project and name it as stringReverseService.js.
  2. Now, copy and paste the below code. In this example, we are using the factory method to create and register our service.

    StringTransformationService.js
    1. app.factory("MyStringTransformationService", function() {  
    2.     return {  
    3.         ChangeString: function(input) {  
    4.             if (!input) {  
    5.                 return input;  
    6.             }  
    7.             var output = "";  
    8.             for (var i = 0; i < input.length; i++) {  
    9.                 if (i > 0 && input[i] == input[i].toUpperCase()) {  
    10.                     output = output + " ";  
    11.                 }  
    12.                 output = output + input[i];  
    13.             }  
    14.             return output;  
    15.         }  
    16.     }  
    17. });  
For more information, please visit my Blog.
Next Recommended Reading Simple Form To Submit Data To Service In Angular 9 With Bootstrap