Monday , December 11 2017
Home / angularjs / AngularJs Custom Service Example

AngularJs Custom Service Example

In the previous tutorials we have discussed about what is AngularJs service, what are all AngularJs pre-defined service and how we can use them in our application.

In this tutorials, we are going to learn how to create our own AngularJs custom service with an example.

How to Create AngularJs Custom Service ?

In AngularJs, we can create our own service by using the module object like below.

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

Here the myApp is an reference of the module object. This module object provides two different functions to create user defined services.

  • service()
  • factory()

AngularJs Custom Service using service() :

We can create a custom service using service() function like below.

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

// Declare variables or functions with this keyword.

})

How to use custom service in controller :

If we want to make use of the custom service in controller, 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 custom service to do the basic mathematical operations, for all addition, subtraction,multiplication and division. And that custom service  can be called from angularjs controller.

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 :

Happy Learning 🙂

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+ ,

Recommended

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 *