Post
Ask Question

Understanding Service, Factory, And Provider

In this section, we will endeavor to comprehend the most frequently confounding elements and usefulness of AngularJS Service, Factory, and Provider.

Basic Understanding

AngularJS Service, Factory, or Provider are all utilized for a similar reason; i.e., for making utility capacity that can be utilized all through the page with the infused capable question. Be that as it may, the way it is made and the way it is utilized are unique. Here, we should attempt to comprehend them unmistakably.

Service

Service is utilized for imparting utility capacities to the Service reference in the controller. Service is a singleton in nature, so for one's benefit, just a single case is made in the program and a similar reference is utilized all through the page. In the Service, we make work names as properties with this question.

Factory

The reason for Factory is likewise the same as Service, however for this situation we make another protest and include works as properties of this question and toward the end, we restore this protest.

Provider

The reason for this is again the same, however Provider yields $get work

Presently let's endeavor to comprehend Service, Factory, and Provider by making and utilizing them.

Making Service, Factory, and Provider

How to make a Service, Factory, and a Provider. To start with, we have made a module.

Next is the Service creation where we have made a service utilizing the .benefit strategy. Notice that in the service, the two capacities "Hi" and "Total" have been made on "this" question.

At that point, we have made a factory strategy. Here, we have made the two capacities "Hi" and "Aggregate" on the new "factoryObject" and afterward we are restoring that protest toward the finish of the factory strategy.

In the last, we have made a provider utilizing the .provider technique in which we are restoring a protest having two capacities "Hi" and "Aggregate" to the $get work.

Create a module -
  1. var myApp = angular.module("myApp", []);  
Create a service function -
  1. app.service("toDoService", function () {  
  2.      
  3.     this.toDo = function () {  
  4.         return "Hi";  
  5.     };  
  6.     this.Add = function (x,y) {  
  7.         return x+ y;  
  8.     };  
  9. });  

Create a factory function -

  1. app.factory("toDoFactory", function () {  
  2.      
  3.     var todofactoryObject = {};  
  4.     todofactoryObject .Hi = function () {  
  5.         return "Hi";  
  6.     }  
  7.     factoryObject.Add = function (x,y) {  
  8.         return x + y;  
  9.     }  
  10.     return todofactoryObject ;  
  11. });  
Create a provider function -
  1. app.provider("todoProvider", function () {    
  2.     this.$get = function () {    
  3.         return {    
  4.             Hi: function () {    
  5.                 return "Hi";    
  6.             },    
  7.             Add: function (x,y) {    
  8.                 return x + y;    
  9.             }    
  10.         };    
  11.     };    
  12. });    

Notice that regardless of that, every one of the three has similar capacities "Hi" and "Whole" having same usefulness, however, the method for presentation is unique. This is the real contrast between Service, Factory, and Provider.

Utilizing Service, Factory, and Provider

To utilize them basically infuse those into the controller definition and begin utilizing those references to call capacities "Hi" and "Total" characterized in them.

Beneath the code bit it is truly straightforward. We are essentially calling "Hi" and "Whole" capacities characterized on particular Service, Factory and Provider reference objects.

  1. myApp.controller("todoController", function($scope, todoService, todoFactory, todoProvider) {  
  2.     // service call    
  3.     $scope.todoService = function() {  
  4.         $scope.resultt = todoService.Hi();  
  5.     };  
  6.     $scope.addFunc = function() {  
  7.         $scope.result = todoService.Add(4, 5);  
  8.     };  
  9.     // factory call    
  10.     $scope.todoFactory = function() {  
  11.         $scope.result = todoFactory.Hi();  
  12.     };  
  13.     $scope.AddFactory = function() {  
  14.         $scope.result = todoFactory.Add(4, 5);  
  15.     };  
  16.     // provider call    
  17.     $scope.todoProvider = function() {  
  18.         $scope.result = todoProvider.Hi();  
  19.     };  
  20.     $scope.addProvider = function() {  
  21.         $scope.result = todoProvider.Add(4, 5);  
  22.     };  
  23. });   
  24. < div ng - app="app" ng - controller="todoController">  
  25. < h1> Service  
  26.     < /h1>  
  27.         < button ng - click="todoService()"> hi  
  28.             < /button>  
  29.                 < button ng - click="addService()"> add  
  30.                     < /button>  
  31.                         < div ng - bind="result">  
  32.                             < /div>  
  33.                                 < h1> Factory  
  34.                                     < /h1>  
  35.                                         < button ng - click="todoFactory()"> hi f  
  36.                                             < /button>  
  37.                                            < button ng - click="addFactory()"> add f  
  38.                                        < /button>  
  39.                                     < /div>  
  40.                              < h1> Provider  
  41.                         < /h1>  
  42.                    < button ng - click="todoProvider()"> hi p  
  43.                   < /button>  
  44.                < button ng - click="AddProvider()"> add p  
  45.              < /button>  
  46.          < div ng - bind="result">  
  47.       < /div>  
  48.  < /div> 

Summary

There is no distinction regarding yield/usefulness between Service, Factory, and Provider, however, the distinction comes when we attempt to make them. Every one of the three has diverse methods for creation and capacity executions.


Similar Articles