Custom web service in AngularJS

AngularJS provides many inbuilt services such as, $http, $route, $window, $location etc. These service can be injected in controller function same as $scope. You can also create custom service according to your need.

There are two ways to create a custom service.
  • Factory
  • Service
Let us take one example to understand the custom service. This example shows the addition and subtraction using custom service.

Please refer the given hierarchy of files and folders.
custom web service
First create the MathService.js file in Scripts folder and write the following code. We have already created myApp module, so we will refer to this module. Factory method always return javascript object. The first parameter of factory method is the name of the service. We have provided the name as MathService. You can give the name according to your convenience. The second parameter is an anonymous function that returns the javascript object. In this function again we have created two more function named addition and subtract. These function will be called in Script.js file using MathService.

Code for MathService.js file

/// <reference path="Script.js" />

myApp.factory("MathService", function ()
{
     return
     {        
          addition :function (a, b)
          {
               return a + b;
          },
          subtract :function (a, b)
          {
               return a - b;
          }
     };
});


You can inject the custom service same as you have already injected $http service. By using MathService we call the addition and subtract method. When user click the add or subtract button that is defined in Demo.htm file, the methods will be called accordingly.

Code for Scrip.js file

/// <reference path="angular.js" />

var myApp = angular.module("myModule", []);
var myController = function ($scope, MathService)
{
     $scope.AddFunction=function(a,b)
     {
          $scope.output = MathService.addition(parseFloat(a),parseFloat(b))
     }
     $scope.SubFunction = function (a, b)
     {
          $scope.output = MathService.subtract(parseFloat(a), parseFloat(b))
     }    
};
myApp.controller("myCont", myController);


Code for Demo.html file

<!DOCTYPE html>
<html ng-app="myModule">
     <head>
          <script src="Scripts/angular.js"></script>
          <script src="Scripts/Script.js"></script>
          <script src="Scripts/MathService.js"></script>
          <style>
               table, th, td
               {
                    border: 1px solid grey;
                    border-collapse: collapse;
                    padding: 5px;
               }
               table tr:nth-child(odd)
               {
                    background-color: #ffe6e6;
               }
               table tr:nth-child(even)
               {
                    background-color: #ccffcc;
               }
          </style>
     </head>
     <body style="font-family:Arial; font-size:medium; color:darkblue">
          <div ng-controller="myCont">
               <h3>Using custom web service in AngularJS.</h3>
               <br/>
               <table>
                    <tr>
                         <th>Enter First Number</th>
                         <td><input type="text" ng-model="a"></td>
                    </tr>
                    <tr>
                         <th>Enter Second Number</th>
                         <td><input type="text" ng-model="b"></td>
                    </tr>
                    <tr>
                         <th>Result</th>
                         <td><input type="text" ng-model="output"></td>
                    </tr>
                    <tr>
                         <td><input type="button" value="ADD" ng-click="AddFunction(a,b)"/>
                         </td>
                         <td><input type="button" value="SUB" ng-click="SubFunction(a,b)"/>
                         </td>
                    </tr>
               </table>
          </div>
     </body>
</html>


By executing the Demo.htm file you will find the following output:

Output:
custom web service
▲