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.

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

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

Create a service function

app.service("toDoService", function () {      
    this.toDo = function () {  
        return "Hi";  
    };     
    this.Add = function (x, y) {  
        return x + y;  
    };  
});

Create a factory function

app.factory("toDoFactory", function () {
    
    var todofactoryObject = {};    
    todofactoryObject.Hi = function () {
        return "Hi";
    };    
    todofactoryObject.Add = function (x, y) {
        return x + y;
    };   
    return todofactoryObject;
});

Create a provider function

app.provider("todoProvider", function() {
    this.$get = function() {
        return {
            Hi: function() {
                return "Hi";
            },
            Add: function(x, y) {
                return x + y;
            }
        };
    };
});

Notice that regardless of that, every one of the three has similar capacities "Hi" and "Whole" having the 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 by particular Service, Factory, and Provider reference objects.

myApp.controller("todoController", function($scope, todoService, todoFactory, todoProvider) {   
    // service call    
    $scope.todoService = function() {  
        $scope.resultt = todoService.Hi();  
    };      
    $scope.addFunc = function() {  
        $scope.result = todoService.Add(4, 5);  
    };      
    // factory call    
    $scope.todoFactory = function() {  
        $scope.result = todoFactory.Hi();  
    };      
    $scope.AddFactory = function() {  
        $scope.result = todoFactory.Add(4, 5);  
    };      
    // provider call    
    $scope.todoProvider = function() {  
        $scope.result = todoProvider.Hi();  
    };     
    $scope.addProvider = function() {  
        $scope.result = todoProvider.Add(4, 5);  
    };  
});

<div ng-app="app" ng-controller="todoController">  
    <h1>Service</h1>  
    <button ng-click="todoService()">hi</button>  
    <button ng-click="addService()">add</button>  
    <div ng-bind="result"></div>  
    
    <h1>Factory</h1>  
    <button ng-click="todoFactory()">hi f</button>  
    <button ng-click="addFactory()">add f</button>  
</div>  

<h1>Provider</h1>  
<button ng-click="todoProvider()">hi p</button>  
<button ng-click="AddProvider()">add p</button>  
<div ng-bind="result"></div>  
</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