Tuesday , January 24 2017
Home / angularjs / AngularJs Custom Service Example

AngularJs Custom Service Example

In the previous tutorials we have discussed about what is AngularJs service and what are all AngularJs pre-defined service and how we can use them in our application. Now this is the time create AngularJs custom service. This tutorials tells you how to create AngularJs custom Service with an example.

How to Create AngularJs Custom Service ?

We can create our own service with module object reference.

var myApp = angular.module(“myApp”,[]);

Now, here myApp is an reference of module in Angular. This module object provides two different functions to create user defined services in AngularJS.

  • service()
  • factory()

Syntax to create service :

myApp.service(“serviceName”,function(){

// Declare variables or functions with this keyword.

})

Using service in controller :

If we want to make use of the service, 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 service to do the mathematical operations.  For all addition, subtraction,multiplication and division operation we need to have one service. And we need to use this service in our AngularJs controller. Here is the Example:

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 :

About chandrashekhar

Hi Folks, you have reach this so far, that shows you like what you are learning. Then why don't you support us to improve for bettor tutorials by leaving your valuable comments and why not you keep in touch with us for latest updates on your favorite blog @ facebook , twitter , Or Google+ ,

Check Also

AngularJs Data Binding Example

One of the important feature of AngularJs is Data Binding. Data binding makes the AngularJs …

Leave a Reply

Your email address will not be published. Required fields are marked *