AngularJS Services Example Tutorial | Beginners Example

AngularJS Service Example

AngularJS Services Example Beginners Guide

AngularJS services are substitutable objects that are wired together using dependency injection (DI). You can use services to organize and share code across your app.

AngularJS services are:

  • Lazily instantiated – AngularJS only instantiates a service when an application component depends on it.
  • Singletons – Each component dependent on a service gets a reference to the single instance generated by the service factory.

To use an AngularJS service, you add it as a dependency for the component (controller, service, filter or directive) that depends on the service. AngularJS’s dependency injection subsystem takes care of the rest.

Let us understand with the example, in this example we will make two Separate services named as Multiplication and Square and Call in single controller. Here we break all the steps in the following manner to help for better understanding, this will also help for those people who are beginner and want to make multiple service and call in the same module.

Create a HTML Page for front end

 

AngularJS Service Example

In this example we have taken three input box and two buttons for performing the separate action

Here is the code Snippet for Html page :-

   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" >
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>   
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.js"></script>
</head>
<body ng-app="mainApp" class="row">
    <div class="col-sm-4"></div>
    <div class="col-sm-4">
        <div ng-controller="myController">
 
            <div>
                <h4>Service 1 (Square Service)</h4>
                <div>
                    Enter a number:
                    <input type="number" ng-model="number">
                    <button ng-click="findSquare()">Square</button><hr />
                    <div>Square is = {{answer}}</div>
                </div>
            </div>
            <br /><br />
 
            <div>
                <h4>Service 2 (Multiplication Service)</h4>
                <div>
                    Enter the first number:
                    <input type="number" ng-model="number1"> <br /><br />
                    Enter the second number:
                    <input type="number" ng-model="number2">
                    <button ng-click="findMul()">Multiplication</button><hr />
                    <div>Multiplication is = {{answer1}}</div>
                </div>
            </div>
        </div>
    </div>

Things to Remember:-

  • in body tag we have taken ng-app=”mainApp” which tells AngularJS that this is (named as mainapp) the root element of the AngularJS application.
  • Assign a controller ng-controller=”myController” for controlling the data of AngularJS applications.
  • In input box ng-model=”number” here one can bind the value of an input field to a variable created in AngularJS
  • In button we are calling the findSquare() and findMul() for calculating the result
  • Output result inside the double curly braces {{}}.

Creating Services

 

Inside the <script>  </script> tag we are  creating the multiplication and square service and registering with the module API

//**********************multiplication service*************************************
 
        var multipicationService = angular.module('multipicationService', [])
.service('multiply', function () {
    this.Mul = function (a, b) { return a * b };
 
});
 
//**********************Square service*************************************
 
        var SqureService = angular.module('SqureService', [])
  .service('squareSer', function () {
      this.square = function (a) { return a * a };
 
  });

Created Service name:- multiply and squareSer

Registering Services

 

All the Services are registered to modules via the Module API.

var myApp = angular.module('mainApp', ['multipicationService', 'SqureService']);
myApp.controller('myController', function ($scope, multiply, squareSer) {
 
 
    //*********************************************call multiplication service*****************
    $scope.findMul = function () {
        $scope.answer1 = multiply.Mul($scope.number1, $scope.number2);
    }
 
    //*********************************************call square service*****************
    $scope.findSquare = function () {
        $scope.answer = squareSer.square($scope.number);
    }
 
});

Now when you make all the things and run the page on browser, the output is look like

AngularJS Service Example

Reference:

Developer Guide by Google

Read More Tutorial

Best WordPress plugin 2018 Making a duplicate WordPress site from an Existent WordPress Site
Advertisements
Advertisements

Leave a Comment