AngularJs Custom Service Example - onlinetutorialspoint

PROGRAMMINGJava ExamplesC Examples
Java Examples
C Examples
C Tutorials
aws
JAVAEXCEPTIONSCOLLECTIONSSWINGJDBC
EXCEPTIONS
COLLECTIONS
SWING
JDBC
JAVA 8
SPRING
SPRING BOOT
HIBERNATE
PYTHON
PHP
JQUERY
PROGRAMMINGJava ExamplesC Examples
Java Examples
C Examples
C Tutorials
aws
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.
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()
We can create a custom service using service() function like below.
myApp.service(“serviceName”,function(){
// Declare variables or functions with this keyword.
})
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.
})
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 :
[advanced_iframe securitykey=”85899c43cd5d45b9ec5729b5189d1961d89f90d9′′ src=”https://www.onlinetutorialspoint.com/AngularJsExamples/Angular_Custom_service.html”]
Happy Learning 🙂

Angular Module Example Tutorials
Angular http (AJAX) Example Tutorials
Angularjs Custom Filter Example
AngularJs Custom Directive Example
Angularjs Services Example Tutorials
AngularJs Filters Example Tutorials
AngularJs lowercase Filter Example
AngularJs Currency Filter Example
AngularJs Orderby Filter Example
AngularJs Search Filter Example
AngularJs Directive Example Tutorials
AngularJs Data Binding Example
Using Array in AngularJs Example
Array of objects in AngularJs  Example
Steps to Create AngularJs Controller

Angular Module Example Tutorials
Angular http (AJAX) Example Tutorials
Angularjs Custom Filter Example
AngularJs Custom Directive Example
Angularjs Services Example Tutorials
AngularJs Filters Example Tutorials
AngularJs lowercase Filter Example
AngularJs Currency Filter Example
AngularJs Orderby Filter Example
AngularJs Search Filter Example
AngularJs Directive Example Tutorials
AngularJs Data Binding Example
Using Array in AngularJs Example
Array of objects in AngularJs  Example
Steps to Create AngularJs Controller