AngularJS Services Example Tutorial | Beginners 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
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="http://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
Reference:
Read More Tutorial
Best WordPress plugin 2018 | Making a duplicate WordPress site from an Existent WordPress Site |