AngularJS: सेवा बनाम प्रदाता बनाम कारखाना




dependency-injection angularjs-service (24)

AngularJS में Service , Provider और Factory बीच अंतर क्या हैं?


प्रदाताओं के साथ खेलते समय मैंने कुछ दिलचस्प देखा।

इंजेक्शनबेल की दृश्यता प्रदाताओं के लिए सेवाओं और कारखानों के मुकाबले अलग है। यदि आप एक कोणीय जेएस "स्थिर" घोषित करते हैं (उदाहरण के लिए, myApp.constant('a', 'Robert');), तो आप इसे सेवाओं, कारखानों और प्रदाताओं में इंजेक्ट कर सकते हैं।

लेकिन अगर आप एंगुलरजेएस "वैल्यू" घोषित करते हैं (उदाहरण के लिए, myApp.value('b', {name: 'Jones'});), तो आप इसे सेवाओं और कारखानों में इंजेक्ट कर सकते हैं, लेकिन प्रदाता बनाने वाले फ़ंक्शन में नहीं। हालांकि, आप इसे उस प्रोजेक्ट में इंजेक्ट कर सकते हैं $getजिसे आप अपने प्रदाता के लिए परिभाषित करते हैं। AngularJS दस्तावेज़ में इसका उल्लेख है, लेकिन यह याद करना आसान है। आप इसे मूल्य और निरंतर तरीकों के अनुभागों में% प्रदान पृष्ठ पर पा सकते हैं।

http://jsfiddle.net/R2Frv/1/

<div ng-app="MyAppName">
    <div ng-controller="MyCtrl">
        <p>from Service: {{servGreet}}</p>
        <p>from Provider: {{provGreet}}</p>
    </div>
</div>
<script>
    var myApp = angular.module('MyAppName', []);

    myApp.constant('a', 'Robert');
    myApp.value('b', {name: 'Jones'});

    myApp.service('greetService', function(a,b) {
        this.greeter = 'Hi there, ' + a + ' ' + b.name;
    });

    myApp.provider('greetProvider', function(a) {
        this.firstName = a;
        this.$get = function(b) {
            this.lastName = b.name;
            this.fullName = this.firstName + ' ' + this.lastName;
            return this;
        };
    });

    function MyCtrl($scope, greetService, greetProvider) {
        $scope.servGreet = greetService.greeter;
        $scope.provGreet = greetProvider.fullName;
    }
</script>

इन सभी पोस्ट को पढ़ने के बाद यह मेरे लिए और अधिक भ्रमित हो गया .. लेकिन फिर भी सभी मूल्यवान जानकारी है .. अंततः मुझे निम्नलिखित तालिका मिली जो सरल तुलना के साथ जानकारी देगी

  • इंजेक्टर दो प्रकार की वस्तुओं को बनाने के लिए व्यंजनों का उपयोग करता है: सेवाएं और विशेष उद्देश्य वस्तुएं
  • पांच नुस्खा प्रकार हैं जो वस्तुओं को बनाने के तरीके को परिभाषित करते हैं: मूल्य, फैक्टरी, सेवा, प्रदाता और निरंतर।
  • फैक्टरी और सेवा सबसे अधिक उपयोग की जाने वाली व्यंजन हैं। उनके बीच एकमात्र अंतर यह है कि सेवा नुस्खा एक कस्टम प्रकार की वस्तुओं के लिए बेहतर काम करता है, जबकि फैक्टरी जावास्क्रिप्ट प्राइमेटिव्स और कार्यों का उत्पादन कर सकती है।
  • प्रदाता रेसिपी मुख्य नुस्खा प्रकार है और अन्य सभी सिर्फ सिंटैक्टिक चीनी हैं।
  • प्रदाता सबसे जटिल नुस्खा प्रकार है। आपको इसकी आवश्यकता नहीं है जब तक कि आप कोड का एक पुन: प्रयोज्य टुकड़ा नहीं बना रहे हैं जिसके लिए वैश्विक कॉन्फ़िगरेशन की आवश्यकता है।
  • नियंत्रक को छोड़कर सभी विशेष उद्देश्य वस्तुओं को फैक्टरी व्यंजनों के माध्यम से परिभाषित किया जाता है।

और शुरुआती समझने के लिए: - यह केस का उपयोग सही नहीं कर सकता है लेकिन उच्च स्तर पर यह इन तीनों के लिए उपयोगिता है।

  1. यदि आप कोणीय मॉड्यूल कॉन्फ़िगरेशन फ़ंक्शन में उपयोग करना चाहते हैं तो प्रदाता के रूप में बनाया जाना चाहिए

angular.module('myApp').config(function($testProvider){
$testProvider.someFunction();
})

  1. अजाक्स कॉल या तृतीय पक्ष एकाग्रता की सेवा की आवश्यकता है ।
  2. डेटा मैनिप्लेशंस के लिए इसे फैक्ट्री के रूप में बनाएं

बुनियादी परिदृश्यों के लिए कारखाना और सेवा समान व्यवहार करती है।


चलो एंगुलरजेएस में बिजनेस लॉजिक को सरल तरीके से संभालने के तीन तरीकों पर चर्चा करें: ( याकोव के Coursera AngularJS पाठ्यक्रम से प्रेरित )

सेवा :

वाक्य - विन्यास:

app.js

 var app = angular.module('ServiceExample',[]);
 var serviceExampleController =
              app.controller('ServiceExampleController', ServiceExampleController);
 var serviceExample = app.service('NameOfTheService', NameOfTheService);

 ServiceExampleController.$inject = ['NameOfTheService'] //protects from minification of js files

function ServiceExampleController(NameOfTheService){
     serviceExampleController = this;
     serviceExampleController.data = NameOfTheService.getSomeData();
 }

function NameOfTheService(){
     nameOfTheService = this;
     nameOfTheService.data = "Some Data";
     nameOfTheService.getSomeData = function(){
           return nameOfTheService.data;
     }     
}

index.html

<div ng-controller = "ServiceExampleController as serviceExample">
   {{serviceExample.data}}
</div>

सेवा की विशेषताएं:

  1. आलसी इंस्टेंटिएटेड : अगर इसे इंजेक्शन नहीं दिया जाता है तो इसे तुरंत चालू नहीं किया जाएगा। तो इसका उपयोग करने के लिए इसे एक मॉड्यूल में इंजेक्ट करना होगा।
  2. सिंगलटन : यदि एकाधिक मॉड्यूल में इंजेक्शन दिया जाता है, तो सभी को केवल एक विशेष उदाहरण तक पहुंच होगी। यही कारण है कि विभिन्न नियंत्रकों में डेटा साझा करना बहुत सुविधाजनक है।

फैक्टरी

सबसे पहले सिंटैक्स पर एक नज़र डालें:

app.js :

var app = angular.module('FactoryExample',[]);
var factoryController = app.controller('FactoryController', FactoryController);
var factoryExampleOne = app.factory('NameOfTheFactoryOne', NameOfTheFactoryOne);
var factoryExampleTwo = app.factory('NameOfTheFactoryTwo', NameOfTheFactoryTwo);

//first implementation where it returns a function
function NameOfTheFactoryOne(){
   var factory = function(){
      return new SomeService();
    }
   return factory;
}

//second implementation where an object literal would be returned
function NameOfTheFactoryTwo(){
   var factory = {
      getSomeService : function(){
          return new SomeService();
       }
    };
   return factory;
}

अब नियंत्रक में उपर्युक्त दो का उपयोग करना:

 var factoryOne = NameOfTheFactoryOne() //since it returns a function
 factoryOne.someMethod();

 var factoryTwo = NameOfTheFactoryTwo.getSomeService(); //accessing the object
 factoryTwo.someMethod();

फैक्ट्री की विशेषताएं:

  1. कारखाने डिजाइन पैटर्न का पालन करता है। कारखाना एक केंद्रीय स्थान है जो नई वस्तुओं या कार्यों का उत्पादन करता है।
  2. न केवल सिंगलटन, बल्कि अनुकूलन सेवाएं उत्पन्न करता है।
  3. .service()विधि एक है कारखाने कि हमेशा सेवा के एक ही प्रकार है, जो एक सिंगलटन है पैदा करता है, और किसी भी आसान तरीका के बिना यह व्यवहार है कॉन्फ़िगर करने के लिए। उस .service()विधि को आमतौर पर किसी ऐसे शॉर्टकट के रूप में उपयोग किया जाता है जिसे किसी भी कॉन्फ़िगरेशन की आवश्यकता नहीं होती है।

प्रदाता

आइए पहले सिंटैक्स को पहले देखें:

angular.module('ProviderModule', [])
.controller('ProviderModuleController', ProviderModuleController)
.provider('ServiceProvider', ServiceProvider)
.config(Config); //optional

Config.$inject = ['ServiceProvider'];
function Config(ServiceProvider) {
  ServiceProvider.defaults.maxItems = 10; //some default value
}


ProviderModuleController.$inject = ['ServiceProvider'];
function ProviderModuleController(ServiceProvider) {
  //some methods
}

function ServiceProvider() {
  var provider = this;

  provider.defaults = {
    maxItems: 10
  };

  provider.$get = function () {
    var someList = new someListService(provider.defaults.maxItems);

    return someList;
  };
}

}

प्रदाता की विशेषताएं:

  1. प्रदाता अंगुलर में सेवाओं को बनाने का सबसे लचीला तरीका है।
  2. न केवल हम एक फैक्ट्री बना सकते हैं जो गतिशील रूप से कॉन्फ़िगर करने योग्य है, लेकिन प्रदाता विधि के साथ कारखाने का उपयोग करने के समय, हम अपने पूरे एप्लिकेशन के बूटस्ट्रैप पर केवल एक बार कारखाने को कॉन्फ़िगर कर सकते हैं।
  3. फैक्ट्री का उपयोग कस्टम सेटिंग्स के साथ पूरे एप्लिकेशन में किया जा सकता है। दूसरे शब्दों में, हम आवेदन शुरू होने से पहले इस कारखाने को कॉन्फ़िगर कर सकते हैं। कोणीय दस्तावेज में वास्तव में यह उल्लेख किया गया है प्रदाता विधि क्या वास्तव में पर्दे के पीछे निष्पादित हो जाता है जब हम किसी के साथ हमारी सेवाओं कॉन्फ़िगर है कि .serviceया .factoryतरीकों।
  4. यह $getएक ऐसा कार्य है जो प्रदाता उदाहरण से सीधे जुड़ा हुआ है। वह कार्य एक कारखाना समारोह है। दूसरे शब्दों में, यह वही है जो हम विधि को प्रदान करने के लिए उपयोग करते हैं.factory । उस समारोह में, हम अपनी सेवा बनाते हैं। यह $getसंपत्ति, यह एक फ़ंक्शन है, जो प्रदाता को प्रदाता बनाता हैAngularJS उम्मीद करता है कि प्रदाता को $ संपत्ति प्राप्त हो, जिसका मूल्य एक ऐसा कार्य है जो कोणीय कारखाने के कार्य के रूप में व्यवहार करेगा। लेकिन इस पूरे प्रदाता सेटअप को बहुत खास बनाता है, यह तथ्य है कि हम configसेवा प्रदाता के अंदर कुछ वस्तु प्रदान कर सकते हैं , और आमतौर पर डिफ़ॉल्ट रूप से आते हैं जिन्हें हम बाद में चरण में ओवरराइट कर सकते हैं, जहां हम पूरे एप्लिकेशन को कॉन्फ़िगर कर सकते हैं।

सेवा बनाम प्रदाता बनाम कारखाना:

मैं इसे सरल रखने की कोशिश कर रहा हूं। यह मूल जावास्क्रिप्ट अवधारणा के बारे में सब कुछ है।

सबसे पहले, चलो AngularJS में सेवाओं के बारे में बात करते हैं !

सेवा क्या है: AngularJS, सेवा मेंएक सिंगलटन जावास्क्रिप्ट ऑब्जेक्ट के अलावा कुछ भी नहीं है जो कुछ उपयोगी तरीकों या गुणों को स्टोर कर सकता है। यह सिंगलटन ऑब्जेक्ट प्रति ngApp (कोणीय ऐप) आधार पर बनाया गया है और इसे वर्तमान ऐप के भीतर सभी नियंत्रकों के बीच साझा किया जाता है। जब Angularjs किसी सेवा ऑब्जेक्ट को तुरंत चालू करता है, तो यह इस सेवा ऑब्जेक्ट को एक अद्वितीय सेवा नाम के साथ पंजीकृत करता है। इसलिए प्रत्येक बार जब हमें सेवा उदाहरण की आवश्यकता होती है, तो कोणीय इस सेवा के नाम के लिए रजिस्ट्री की खोज करता है, और यह सेवा ऑब्जेक्ट का संदर्भ देता है। इस तरह हम सेवा ऑब्जेक्ट पर विधि, एक्सेस गुण आदि का आह्वान कर सकते हैं। आप सवाल कर सकते हैं कि क्या आप संपत्तियों को भी रख सकते हैं, नियंत्रकों के दायरे की वस्तु पर विधियां! तो आपको सेवा वस्तु की आवश्यकता क्यों है? उत्तर है: कई नियंत्रक दायरे के बीच सेवाएं साझा की जाती हैं। यदि आप नियंत्रक के दायरे ऑब्जेक्ट में कुछ गुण / विधियां डालते हैं, तो यह केवल मौजूदा दायरे में उपलब्ध होगा।लेकिन जब आप विधियों को परिभाषित करते हैं, सेवा ऑब्जेक्ट पर गुण, यह वैश्विक स्तर पर उपलब्ध होगा और उस सेवा को इंजेक्ट करके किसी भी नियंत्रक के दायरे में पहुंचा जा सकता है।

तो यदि तीन नियंत्रक गुंजाइश हैं, तो इसे नियंत्रक ए, नियंत्रक और नियंत्रक सी होने दें, सभी एक ही सेवा उदाहरण साझा करेंगे।

<div ng-controller='controllerA'>
    <!-- controllerA scope -->
</div>
<div ng-controller='controllerB'>
    <!-- controllerB scope -->
</div>
<div ng-controller='controllerC'>
    <!-- controllerC scope -->
</div>

सेवा कैसे बनाएं?

AngularJS सेवा पंजीकृत करने के लिए विभिन्न विधियां प्रदान करता है। यहां हम तीन विधियों कारखाने (..), सेवा (..), प्रदाता (..) पर ध्यान केंद्रित करेंगे;

कोड संदर्भ के लिए इस लिंक का प्रयोग करें

कारखाना समारोह:

हम नीचे कारखाने के फ़ंक्शन को परिभाषित कर सकते हैं।

factory('serviceName',function fnFactory(){ return serviceInstance;})

AngularJS 'फैक्टरी (' serviceName ', fnFactory)' विधि प्रदान करता है जो दो पैरामीटर, serviceName और एक जावास्क्रिप्ट फ़ंक्शन लेता है। कोणीय फ़ंक्शन fnFactory () जैसे नीचे दिए गए क्रियान्वयन द्वारा सेवा उदाहरण बनाता है ।

var serviceInstace = fnFactory();

पारित कार्य किसी ऑब्जेक्ट को परिभाषित कर सकता है और उस ऑब्जेक्ट को वापस कर सकता है। AngularJS बस इस ऑब्जेक्ट संदर्भ को एक चर के लिए संग्रहीत करता है जिसे पहले तर्क के रूप में पारित किया जाता है। एफएन फैक्ट्री से लौटाई गई कुछ भी सेवा के लिए बाध्य होगी। ऑब्जेक्ट लौटने के बजाय, हम फ़ंक्शन, वैल्यू इत्यादि भी लौट सकते हैं, जो भी हम वापस करेंगे, सेवा उदाहरण के लिए उपलब्ध होंगे।

उदाहरण:

var app= angular.module('myApp', []);
//creating service using factory method
app.factory('factoryPattern',function(){
  var data={
    'firstName':'Tom',
    'lastName':' Cruise',
    greet: function(){
      console.log('hello!' + this.firstName + this.lastName);
    }
  };

  //Now all the properties and methods of data object will be available in our service object
  return data;
});

सेवा समारोह:

service('serviceName',function fnServiceConstructor(){})

यह एक और तरीका है, हम एक सेवा पंजीकृत कर सकते हैं। एकमात्र अंतर यह है कि AngularJS सेवा ऑब्जेक्ट को तुरंत चालू करने का प्रयास करता है। इस बार कोणीय 'नया' कीवर्ड का उपयोग करता है और कन्स्ट्रक्टर फ़ंक्शन को नीचे जैसा कुछ कॉल करता है।

var serviceInstance = new fnServiceConstructor();

कन्स्ट्रक्टर फ़ंक्शन में हम सेवा ऑब्जेक्ट में गुण / विधियों को जोड़ने के लिए 'यह' कीवर्ड का उपयोग कर सकते हैं। उदाहरण:

//Creating a service using the service method
var app= angular.module('myApp', []);
app.service('servicePattern',function(){
  this.firstName ='James';
  this.lastName =' Bond';
  this.greet = function(){
    console.log('My Name is '+ this.firstName + this.lastName);
  };
});

प्रदाता समारोह:

प्रदाता () फ़ंक्शन सेवाओं को बनाने का एक और तरीका है। आइए हम ऐसी सेवा बनाने में रुचि रखते हैं जो उपयोगकर्ता को कुछ ग्रीटिंग संदेश प्रदर्शित करे। लेकिन हम एक कार्यक्षमता भी प्रदान करना चाहते हैं जैसे कि उपयोगकर्ता अपना ग्रीटिंग संदेश सेट कर सके। तकनीकी शर्तों में हम विन्यास योग्य सेवाएं बनाना चाहते हैं। हम ऐसा कैसे कर सकते हैं ? एक तरीका होना चाहिए, ताकि ऐप अपने कस्टम ग्रीटिंग संदेशों को पार कर सके और एंगुलरज इसे फैक्ट्री / कंस्ट्रक्टर फ़ंक्शन पर उपलब्ध कराएंगे जो हमारी सेवाओं का उदाहरण बनाते हैं। ऐसे मामले में प्रदाता () फ़ंक्शन नौकरी करता है। प्रदाता () फ़ंक्शन का उपयोग करके हम कॉन्फ़िगर करने योग्य सेवाएं बना सकते हैं।

हम नीचे दिए अनुसार प्रदाता वाक्यविन्यास का उपयोग कर विन्यास योग्य सेवाएं बना सकते हैं।

/*step1:define a service */
app.provider('service',function serviceProviderConstructor(){});

/*step2:configure the service */
app.config(function configureService(serviceProvider){});

प्रदाता वाक्यविन्यास आंतरिक रूप से कैसे काम करता है?

1. प्रदाता वस्तु हमारे प्रदाता समारोह में परिभाषित कन्स्ट्रक्टर फ़ंक्शन का उपयोग करके बनाई गई है।

var serviceProvider = new serviceProviderConstructor();

2. कार्य जो हमने app.config () में पारित किया है, निष्पादित हो जाओ। इसे कॉन्फ़िगर चरण कहा जाता है, और यहां हमारे पास हमारी सेवा को अनुकूलित करने का मौका है।

configureService(serviceProvider);

3. सेवा सेवा प्रदाता के $ get विधि को कॉल करके अंतिम रूप से सेवा उदाहरण बनाया गया है।

serviceInstance = serviceProvider.$get()

सिंटैक्स प्रदान करते हुए सेवा बनाने के लिए नमूना कोड:

var app= angular.module('myApp', []);
app.provider('providerPattern',function providerConstructor(){
  //this function works as constructor function for provider
  this.firstName = 'Arnold ';
  this.lastName = ' Schwarzenegger' ;
  this.greetMessage = ' Welcome, This is default Greeting Message' ;
  //adding some method which we can call in app.config() function
  this.setGreetMsg = function(msg){
    if(msg){
      this.greetMessage =  msg ;
    }
  };

  //We can also add a method which can change firstName and lastName
  this.$get = function(){
    var firstName = this.firstName;
    var lastName = this.lastName ;
    var greetMessage = this.greetMessage;
    var data={
       greet: function(){
         console.log('hello, ' + firstName + lastName+'! '+ greetMessage);
       }
    };
    return data ;
  };
});

app.config(
  function(providerPatternProvider){
    providerPatternProvider.setGreetMsg(' How do you do ?');
  }
);

कामकाजी डेमो

सारांश:

फैक्टरी एक फैक्ट्री फ़ंक्शन का उपयोग करती है जो एक सेवा उदाहरण लौटाती है। serviceInstance = fnFactory ();

सेवा एक कन्स्ट्रक्टर फ़ंक्शन का उपयोग करती है और कोणीय सेवा उदाहरण बनाने के लिए 'नया' कीवर्ड का उपयोग करके इस कन्स्ट्रक्टर फ़ंक्शन का आह्वान करता है। serviceInstance = नया fnServiceConstructor ();

प्रदाता एक प्रदाता कन्स्ट्रक्टर फ़ंक्शन को परिभाषित करता है, यह प्रदाता कॉन्स्ट्रक्टर फ़ंक्शन एक फ़ैक्टरी फ़ंक्शन $ प्राप्त करता है । कोणीय कॉल सेवा ऑब्जेक्ट बनाने के लिए $ () प्राप्त करता है। प्रोवाइडर सिंटैक्स में तत्काल प्राप्त होने से पहले सेवा ऑब्जेक्ट को कॉन्फ़िगर करने का एक अतिरिक्त लाभ होता है। serviceInstance = $ get ();


एक अतिरिक्त स्पष्टीकरण यह है कि कारखाने कार्य / प्राइमेटिव बना सकते हैं, जबकि सेवाएं नहीं हो सकती हैं। jsFiddle आधार पर यह jsFiddle देखें : http://jsfiddle.net/skeller88/PxdSP/1351/

कारखाना एक समारोह देता है जिसे बुलाया जा सकता है:

myApp.factory('helloWorldFromFactory', function() {
  return function() {
    return "Hello, World!";
  };
});

कारखाना एक वस्तु को एक विधि के साथ भी वापस कर सकता है जिसे बुलाया जा सकता है:

myApp.factory('helloWorldFromFactory', function() {
  return {
    sayHello: function() {
      return "Hello, World!";
    }
  };
});

सेवा किसी ऑब्जेक्ट को एक विधि के साथ लौटाती है जिसे लागू किया जा सकता है:

myApp.service('helloWorldFromService', function() {
  this.sayHello = function() {
     return "Hello, World!";
  };
});

अधिक जानकारी के लिए, अंतर पर मैंने लिखा एक पोस्ट देखें: http://www.shanemkeller.com/tldr-services-vs-factories-in-angular/


जेएस फिल्ड डेमो

factory / service / provider साथ "हैलो वर्ल्ड" उदाहरण:

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

//service style, probably the simplest one
myApp.service('helloWorldFromService', function() {
    this.sayHello = function() {
        return "Hello, World!";
    };
});

//factory style, more involved but more sophisticated
myApp.factory('helloWorldFromFactory', function() {
    return {
        sayHello: function() {
            return "Hello, World!";
        }
    };
});
    
//provider style, full blown, configurable version     
myApp.provider('helloWorld', function() {

    this.name = 'Default';

    this.$get = function() {
        var name = this.name;
        return {
            sayHello: function() {
                return "Hello, " + name + "!";
            }
        }
    };

    this.setName = function(name) {
        this.name = name;
    };
});

//hey, we can configure a provider!            
myApp.config(function(helloWorldProvider){
    helloWorldProvider.setName('World');
});
        

function MyCtrl($scope, helloWorld, helloWorldFromFactory, helloWorldFromService) {
    
    $scope.hellos = [
        helloWorld.sayHello(),
        helloWorldFromFactory.sayHello(),
        helloWorldFromService.sayHello()];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
    {{hellos}}
</div>
</body>


स्मृति उद्देश्यों के आधार पर, नियंत्रकों को तभी तत्काल किया जाता है जब उन्हें आवश्यकता होती है और जब वे नहीं होते हैं तो त्याग दिया जाता है। इस वजह से, जब भी आप कोई मार्ग स्विच करते हैं या किसी पृष्ठ को फिर से लोड करते हैं, तो कोणीय वर्तमान नियंत्रक को साफ़ करता है। हालांकि सेवाएं एक आवेदन के जीवनकाल के लिए डेटा रखने के साधन प्रदान करती हैं, जबकि इन्हें निरंतर तरीके से विभिन्न नियंत्रकों में भी इस्तेमाल किया जा सकता है।

कोणीय हमें अपनी सेवा बनाने और पंजीकृत करने के तीन तरीके प्रदान करता है।

1) फैक्टरी

2) सेवा

3) प्रदाता

फैक्टरी : एक कारखाना एक साधारण कार्य है जो आपको वस्तु बनाने से पहले कुछ तर्क जोड़ने की अनुमति देता है। यह निर्मित वस्तु देता है।

यह सिर्फ वर्ग की तरह कार्यों का संग्रह है। इसलिए, जब आप इसे कन्स्ट्रक्टर फ़ंक्शन के साथ उपयोग कर रहे हैं तो इसे विभिन्न नियंत्रकों में तत्काल किया जा सकता है।

सेवा : एक सेवा एक कन्स्ट्रक्टर फ़ंक्शन है जो ऑब्जेक्ट को नए कीवर्ड का उपयोग करके बनाता है। आप इस कीवर्ड का उपयोग करके किसी सेवा ऑब्जेक्ट में गुण और फ़ंक्शंस जोड़ सकते हैं। कारखाने के विपरीत, यह कुछ भी वापस नहीं करता है।

यह एक सिंगलटन वस्तु है। जब आप एप्लिकेशन में एक ऑब्जेक्ट साझा करने की आवश्यकता होती है तो इसका उपयोग करें। उदाहरण के लिए, प्रमाणीकृत उपयोगकर्ता विवरण।

प्रदाता : कॉन्फ़िगर करने योग्य सेवा ऑब्जेक्ट बनाने के लिए प्रदाता का उपयोग किया जाता है। यह $ get () फ़ंक्शन का उपयोग करके मूल्य देता है।

जब आपको इसे उपलब्ध कराने से पहले अपनी सेवा ऑब्जेक्ट के लिए मॉड्यूल-वार कॉन्फ़िगरेशन प्रदान करने की आवश्यकता होती है।

निम्नलिखित कोड चलाएं और आउटपुट देखें।

<!DOCTYPE html>
<html ng-app="app">
<head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.1/angular.min.js"></script>
    <meta charset=utf-8 />
    <title>JS Bin</title>
</head>
<body ng-controller="MyCtrl">
    {{serviceOutput}}
    <br/><br/>
    {{factoryOutput}}
    <br/><br/>
    {{providerOutput}}
    <script>
        var app = angular.module( 'app', [] );
        var MyFunc = function() {
            this.name = "default name";
            this.$get = function() {
                this.name = "new name"
                return "Hello from MyFunc.$get(). this.name = " + this.name;
            };
            return "Hello from MyFunc(). this.name = " + this.name;
        };
        // returns the actual function
        app.service( 'myService', MyFunc );
        // returns the function's return value
        app.factory( 'myFactory', MyFunc );
        // returns the output of the function's $get function
        app.provider( 'myProv', MyFunc );
        function MyCtrl( $scope, myService, myFactory, myProv ) {
            $scope.serviceOutput = "myService = " + myService;
            $scope.factoryOutput = "myFactory = " + myFactory;
            $scope.providerOutput = "myProvider = " + myProv;
        }
    </script>
</body>
</html>


यह नौसिखिया के लिए बहुत भ्रमित हिस्सा है और मैंने इसे आसान शब्दों में स्पष्ट करने की कोशिश की है

AngularJS सेवा: नियंत्रक में सेवा संदर्भ के साथ उपयोगिता कार्यों को साझा करने के लिए उपयोग किया जाता है। सेवा प्रकृति में सिंगलटन है इसलिए एक सेवा के लिए ब्राउज़र में केवल एक उदाहरण बनाया गया है और उसी संदर्भ में पूरे पृष्ठ का उपयोग किया जाता है।

सेवा में, हम इस ऑब्जेक्ट के साथ प्रॉपर्टी के रूप में फ़ंक्शन नाम बनाते हैं ।

AngularJS फैक्टरी: कारखाने का उद्देश्य सेवा के समान ही है, हालांकि इस मामले में हम एक नई वस्तु बनाते हैं और इस वस्तु के गुणों के रूप में कार्य जोड़ते हैं और अंत में हम इस वस्तु को वापस कर देते हैं।

AngularJS प्रदाता: इसका उद्देश्य फिर से समान है हालांकि प्रदाता अपने $ $ फ़ंक्शन का आउटपुट देता है।

सेवा, फैक्ट्री और प्रदाता का निर्धारण और उपयोग http://www.dotnetfunda.com/articles/show/3156/difference-between-angularjs-service-factory-and-provider पर समझाया गया हैhttp://www.dotnetfunda.com/articles/show/3156/difference-between-angularjs-service-factory-and-provider


इस मामले पर मेरी स्पष्टीकरण:

मूल रूप से सभी उल्लिखित प्रकार (सेवा, कारखाना, प्रदाता, इत्यादि) केवल वैश्विक चर बनाने (और पूरे आवेदन के लिए वैश्विक हैं) को बना रहे हैं और कॉन्फ़िगर कर रहे हैं, जैसे पुराने पुराने वैश्विक चर थे।

जबकि वैश्विक चर की अनुशंसा नहीं की जाती है, इन वैश्विक चरों का वास्तविक उपयोग प्रासंगिक नियंत्रक को चर पारित करके निर्भरता इंजेक्शन प्रदान करना है

"वैश्विक चर" के लिए मूल्य बनाने में जटिलताओं के कई स्तर हैं:

  1. निरंतर
    यह एक वास्तविक स्थिरता को परिभाषित करता है जिसे पूरे आवेदन के दौरान संशोधित नहीं किया जाना चाहिए, जैसे अन्य भाषाओं में स्थिरांक (जावास्क्रिप्ट की कमी है)।
  2. मान
    यह एक संशोधित मूल्य या वस्तु है, और यह कुछ वैश्विक चर के रूप में कार्य करता है, जिसे अन्य सेवाओं या कारखानों को बनाने के दौरान भी इंजेक्शन दिया जा सकता है (इन पर और देखें)। हालांकि, यह एक " शाब्दिक मूल्य " होना चाहिए , जिसका अर्थ है कि किसी को वास्तविक मूल्य लिखना है, और किसी भी गणना या प्रोग्रामिंग तर्क का उपयोग नहीं कर सकता (दूसरे शब्दों में 39 या myText या {prop: "value"} ठीक है, लेकिन 2 +2 नहीं है)।
  3. फैक्टरी
    एक और सामान्य मूल्य, जिसे तुरंत गणना की जा सकती है। यह एंगुलरजेएस को एक फ़ंक्शन पास करके मूल्य की गणना करने के लिए आवश्यक तर्क के साथ काम करता है और AngularJS इसे निष्पादित करता है, और यह नामित चर में वापसी मान बचाता है।
    ध्यान दें कि किसी ऑब्जेक्ट को वापस करना संभव है (जिस स्थिति में यह किसी सेवा के समान कार्य करेगा ) या एक फ़ंक्शन (जो कॉलबैक फ़ंक्शन के रूप में चर में सहेजा जाएगा)।
  4. सेवा
    ए सेवा फैक्ट्री का एक और अधिक पट्टी-डाउन संस्करण है जो केवल तभी वैध होता है जब मूल्य एक वस्तु है, और यह फ़ंक्शन में सीधे किसी भी तर्क को लिखने की अनुमति देता है (जैसे कि यह एक निर्माता होगा), साथ ही घोषणा और एक्सेसिंग इस कीवर्ड का उपयोग कर ऑब्जेक्ट गुण ।
  5. प्रदाता
    एक ऐसी सेवा के विपरीत जो फैक्ट्री का सरलीकृत संस्करण है , एक प्रदाता "ग्लोबल" वैरिएबल को शुरू करने का एक अधिक जटिल, लेकिन अधिक लचीला तरीका है, जिसमें सबसे बड़ी लचीलापन app.config से मान सेट करने का विकल्प है।
    यह प्रदाता को पास करने के द्वारा सेवा और प्रदाता के संयोजन का उपयोग करने जैसा काम करता है , जिसमें इस कीवर्ड का उपयोग करके घोषित गुण होते हैं , जिसका उपयोग किया जा सकता है app.config
    इसके बाद फ़ाइल के माध्यम से उपरोक्त गुणों को सेट करने के बाद AngularJS द्वारा निष्पादित एक अलग $ .get फ़ंक्शन होना आवश्यक है app.config, और यह $ .get फ़ंक्शन केवल कारखाने के रूप में व्यवहार करता है उपरोक्त, उसमें इसके वापसी मूल्य का उपयोग "वैश्विक" चर को आरंभ करने के लिए किया जाता है।

जैसा कि यहां कई लोगों द्वारा इंगित किया गया है कि एक कारखाना, प्रदाता, सेवा, और यहां तक ​​कि मूल्य और निरंतर एक ही चीज़ के संस्करण हैं। आप उन providerसभी में अधिक सामान्य विच्छेदन कर सकते हैं। इस तरह:

यह आलेख यहां दिया गया है:


सभी सेवाएं सिंगलेट हैं ; वे प्रति ऐप एक बार तत्काल हो जाते हैं। वे किसी भी प्रकार का हो सकते हैं, भले ही यह एक आदिम, ऑब्जेक्ट शाब्दिक, कार्य, या यहां तक ​​कि एक कस्टम प्रकार का एक उदाहरण हो।

value , factory , service , constant , और provider विधियां सभी प्रदाता हैं। वे इंजेक्टर को सेवाओं को तुरंत चालू करने के लिए सिखाते हैं।

सबसे वर्बोज़, लेकिन सबसे व्यापक एक प्रदाता नुस्खा है। शेष चार नुस्खा प्रकार - मूल्य, फैक्ट्री, सेवा और कॉन्स्टेंट - प्रदाता नुस्खा के शीर्ष पर सिंटैक्टिक चीनी हैं

  • वैल्यू रेसिपी सबसे सरल मामला है, जहां आप स्वयं सेवा को तुरंत चालू करते हैं और इंजेक्टर को तत्काल मूल्य प्रदान करते हैं।
  • फैक्ट्री रेसिपी इंजेक्टर को फैक्ट्री फ़ंक्शन देता है जो इसे कॉल को तुरंत चालू करने की आवश्यकता होती है। जब बुलाया जाता है, फैक्ट्री फ़ंक्शन सेवा उदाहरण बनाता है और देता है। सेवा की निर्भरताओं को कार्यों के तर्क के रूप में इंजेक्शन दिया जाता है। तो इस नुस्खा का उपयोग निम्नलिखित क्षमताओं को जोड़ता है:
    • अन्य सेवाओं का उपयोग करने की क्षमता (निर्भरताएं हैं)
    • सेवा प्रारंभिकरण
    • देरी / आलसी प्रारंभिकरण
  • सेवा नुस्खा लगभग फैक्टरी नुस्खा जैसा ही है, लेकिन यहां इंजेक्टर एक फैक्ट्री फ़ंक्शन के बजाय नए ऑपरेटर के साथ एक कन्स्ट्रक्टर का आह्वान करता है।
  • प्रदाता नुस्खा आमतौर पर अधिक है । यह कारखाने के निर्माण को कॉन्फ़िगर करने की अनुमति देकर संकेत की एक और परत जोड़ता है।

    आपको केवल प्रदाता रेसिपी का उपयोग करना चाहिए जब आप एप्लिकेशन-वाइड कॉन्फ़िगरेशन के लिए एपीआई का पर्दाफाश करना चाहते हैं जिसे एप्लिकेशन शुरू होने से पहले किया जाना चाहिए। यह आमतौर पर पुन: प्रयोज्य सेवाओं के लिए दिलचस्प होता है जिनके व्यवहार को अनुप्रयोगों के बीच थोड़ा अलग करने की आवश्यकता हो सकती है।

  • कॉन्स्टेंट रेसिपी वैल्यू रेसिपी की तरह है, सिवाय इसके कि यह आपको कॉन्फ़िगरेशन चरण में उपलब्ध सेवाओं को परिभाषित करने की अनुमति देता है। वैल्यू रेसिपी का उपयोग करके बनाई गई सेवाओं की तुलना में जल्द ही। मूल्यों के विपरीत, उन्हें सजावटी का उपयोग करके सजाया नहीं जा सकता है।
प्रदाता दस्तावेज देखें।


मेरे लिए अंतर को समझने का सबसे अच्छा और सरल तरीका यह है:

var service, factory;
service = factory = function(injection) {}

AngularJS कैसे विशेष घटकों को सरल करता है (सरलीकृत):

// service
var angularService = new service(injection);

// factory
var angularFactory = factory(injection);

इसलिए, सेवा के लिए, AngularJS घटक क्या बनता है कक्षा का ऑब्जेक्ट उदाहरण है जो सेवा घोषणा समारोह द्वारा दर्शाया जाता है। फैक्ट्री के लिए, यह परिणाम फैक्ट्री घोषणा समारोह से वापस आ गया है। कारखाना सेवा के समान व्यवहार कर सकता है:

var factoryAsService = function(injection) {
  return new function(injection) {
    // Service content
  }
}

सोचने का सबसे आसान तरीका निम्नलिखित है:

  • सेवा एक सिंगलटन ऑब्जेक्ट उदाहरण है। यदि आप अपने कोड के लिए सिंगलटन ऑब्जेक्ट प्रदान करना चाहते हैं तो सेवाओं का उपयोग करें।
  • फैक्टरी एक वर्ग है। कारखानों का प्रयोग करें यदि आप अपने कोड के लिए कस्टम कक्षाएं प्रदान करना चाहते हैं (सेवाओं के साथ नहीं किया जा सकता है क्योंकि वे पहले से ही तत्काल हैं)।

फैक्ट्री 'क्लास' उदाहरण चारों ओर टिप्पणियों, साथ ही प्रदाता अंतर में प्रदान किया जाता है।


यहां कुछ ब्रोइलरप्लेट कोड है जो मैंने एंगुलरजेस में ऑब्जेक्ट फैक्ट्री के लिए कोड-टेम्पलेट के रूप में सामने आया है। मैंने चित्रण करने के लिए एक उदाहरण के रूप में एक कार / कारफैक्टरी का उपयोग किया है। नियंत्रक में सरल कार्यान्वयन कोड के लिए बनाता है।

     <script>
        angular.module('app', [])
            .factory('CarFactory', function() {

                /**
                 * BroilerPlate Object Instance Factory Definition / Example
                 */
                this.Car = function() {

                    // initialize instance properties
                    angular.extend(this, {
                        color           : null,
                        numberOfDoors   : null,
                        hasFancyRadio   : null,
                        hasLeatherSeats : null
                    });

                    // generic setter (with optional default value)
                    this.set = function(key, value, defaultValue, allowUndefined) {

                        // by default,
                        if (typeof allowUndefined === 'undefined') {
                            // we don't allow setter to accept "undefined" as a value
                            allowUndefined = false;
                        }
                        // if we do not allow undefined values, and..
                        if (!allowUndefined) {
                            // if an undefined value was passed in
                            if (value === undefined) {
                                // and a default value was specified
                                if (defaultValue !== undefined) {
                                    // use the specified default value
                                    value = defaultValue;
                                } else {
                                    // otherwise use the class.prototype.defaults value
                                    value = this.defaults[key];
                                } // end if/else
                            } // end if
                        } // end if

                        // update 
                        this[key] = value;

                        // return reference to this object (fluent)
                        return this;

                    }; // end this.set()

                }; // end this.Car class definition

                // instance properties default values
                this.Car.prototype.defaults = {
                    color: 'yellow',
                    numberOfDoors: 2,
                    hasLeatherSeats: null,
                    hasFancyRadio: false
                };

                // instance factory method / constructor
                this.Car.prototype.instance = function(params) {
                    return new 
                        this.constructor()
                                .set('color',           params.color)
                                .set('numberOfDoors',   params.numberOfDoors)
                                .set('hasFancyRadio',   params.hasFancyRadio)
                                .set('hasLeatherSeats', params.hasLeatherSeats)
                    ;
                };

                return new this.Car();

            }) // end Factory Definition
            .controller('testCtrl', function($scope, CarFactory) {

                window.testCtrl = $scope;

                // first car, is red, uses class default for:
                // numberOfDoors, and hasLeatherSeats
                $scope.car1     = CarFactory
                                    .instance({
                                        color: 'red'
                                    })
                                ;

                // second car, is blue, has 3 doors, 
                // uses class default for hasLeatherSeats
                $scope.car2     = CarFactory
                                    .instance({
                                        color: 'blue',
                                        numberOfDoors: 3
                                    })
                                ;
                // third car, has 4 doors, uses class default for 
                // color and hasLeatherSeats
                $scope.car3     = CarFactory
                                    .instance({
                                        numberOfDoors: 4
                                    })
                                ;
                // sets an undefined variable for 'hasFancyRadio',
                // explicitly defines "true" as default when value is undefined
                $scope.hasFancyRadio = undefined;
                $scope.car3.set('hasFancyRadio', $scope.hasFancyRadio, true);

                // fourth car, purple, 4 doors,
                // uses class default for hasLeatherSeats
                $scope.car4     = CarFactory
                                    .instance({
                                        color: 'purple',
                                        numberOfDoors: 4
                                    });
                // and then explicitly sets hasLeatherSeats to undefined
                $scope.hasLeatherSeats = undefined;
                $scope.car4.set('hasLeatherSeats', $scope.hasLeatherSeats, undefined, true);

                // in console, type window.testCtrl to see the resulting objects

            });
    </script>

यहां एक सरल उदाहरण है। मैं कुछ तीसरे पक्ष के पुस्तकालयों का उपयोग कर रहा हूं जो "स्थिति" वस्तु अक्षांश और देशांतर को उजागर करने की अपेक्षा करते हैं, लेकिन विभिन्न ऑब्जेक्ट गुणों के माध्यम से। मैं विक्रेता कोड को हैक करना नहीं चाहता था, इसलिए मैंने "स्थिति" ऑब्जेक्ट्स को समायोजित किया जो मैं चारों ओर गुज़र रहा था।

    angular.module('app')
.factory('PositionFactory', function() {

    /**
     * BroilerPlate Object Instance Factory Definition / Example
     */
    this.Position = function() {

        // initialize instance properties 
        // (multiple properties to satisfy multiple external interface contracts)
        angular.extend(this, {
            lat         : null,
            lon         : null,
            latitude    : null,
            longitude   : null,
            coords: {
                latitude: null,
                longitude: null
            }
        });

        this.setLatitude = function(latitude) {
            this.latitude           = latitude;
            this.lat                = latitude;
            this.coords.latitude    = latitude;
            return this;
        };
        this.setLongitude = function(longitude) {
            this.longitude          = longitude;
            this.lon                = longitude;
            this.coords.longitude   = longitude;
            return this;
        };

    }; // end class definition

    // instance factory method / constructor
    this.Position.prototype.instance = function(params) {
        return new 
            this.constructor()
                    .setLatitude(params.latitude)
                    .setLongitude(params.longitude)
        ;
    };

    return new this.Position();

}) // end Factory Definition

.controller('testCtrl', function($scope, PositionFactory) {
    $scope.position1 = PositionFactory.instance({latitude: 39, longitude: 42.3123});
    $scope.position2 = PositionFactory.instance({latitude: 39, longitude: 42.3333});
}) // end controller

;


कारखाना: कारखाना वास्तव में कारखाने के अंदर एक वस्तु बनाते हैं और इसे वापस कर देते हैं।
सेवा: सेवा में आपके पास एक मानक फ़ंक्शन है जो फ़ंक्शन को परिभाषित करने के लिए इस कीवर्ड का उपयोग करता है।
प्रदाता: प्रदाता वहां एक $ है जिसे आप परिभाषित करते हैं और इसका उपयोग उस डेटा को प्राप्त करने के लिए किया जा सकता है जो डेटा देता है।


मेरी समझ नीचे बहुत सरल है।

फैक्टरी: आप बस कारखाने के अंदर एक वस्तु बनाते हैं और इसे वापस कर देते हैं।

सर्विस:

आपके पास एक मानक फ़ंक्शन है जो फ़ंक्शन को परिभाषित करने के लिए इस कीवर्ड का उपयोग करता है।

प्रदाता:

एक $getवस्तु है जिसे आप परिभाषित करते हैं और इसका उपयोग उस डेटा को प्राप्त करने के लिए किया जा सकता है जो डेटा देता है।


AngularJS फैक्टरी, सेवा और प्रदाता को समझना

इन सभी का उपयोग पुन: प्रयोज्य सिंगलटन वस्तुओं को साझा करने के लिए किया जाता है। यह आपके ऐप / विभिन्न घटकों / मॉड्यूल में पुन: प्रयोज्य कोड साझा करने में मदद करता है।

डॉक्स Service/Factory :

  • आलसी तत्काल - कोणीय केवल एक सेवा / फैक्ट्री को तत्काल करता है जब कोई अनुप्रयोग घटक उस पर निर्भर करता है।
  • सिंगलेट्स - सेवा पर निर्भर प्रत्येक घटक सेवा कारखाने द्वारा उत्पन्न एकल उदाहरण का संदर्भ प्राप्त करता है।

फ़ैक्टरी

एक कारखाना कार्य करता है जहां आप वस्तु बनाने से पहले तर्क को जोड़ / जोड़ सकते हैं, फिर नव निर्मित वस्तु वापस आती है।

app.factory('MyFactory', function() {
    var serviceObj = {};
    //creating an object with methods/functions or variables
    serviceObj.myFunction = function() {
        //TO DO:
    };
    //return that object
    return serviceObj;
});

प्रयोग

यह सिर्फ वर्ग की तरह कार्यों का संग्रह हो सकता है।इसलिए, जब आप इसे अपने नियंत्रक / फैक्ट्री / निर्देशक कार्यों के अंदर इंजेक्शन देते हैं तो इसे विभिन्न नियंत्रकों में तत्काल किया जा सकता है। यह प्रति ऐप केवल एक बार तत्काल है।

सर्विस

बस सेवाओं को देखते हुए सरणी प्रोटोटाइप के बारे में सोचते हैं। एक सेवा एक ऐसा फ़ंक्शन है जो 'नया' कीवर्ड का उपयोग करके एक नई वस्तु को तुरंत चालू करता है। आप thisकीवर्ड का उपयोग करके किसी सेवा ऑब्जेक्ट में गुण और फ़ंक्शंस जोड़ सकते हैं । एक कारखाने के विपरीत, यह कुछ भी वापस नहीं करता है (यह एक वस्तु देता है जिसमें विधियों / गुण होते हैं)।

app.service('MyService', function() {
    //directly binding events to this context
    this.myServiceFunction = function() {
        //TO DO:
    };
});

प्रयोग

जब आप पूरे ऑब्जेक्ट में एक ऑब्जेक्ट साझा करने की आवश्यकता होती है तो इसका उपयोग करें। उदाहरण के लिए, प्रमाणित उपयोगकर्ता विवरण, शेयर-सक्षम विधियां / डेटा, उपयोगिता कार्य आदि।

प्रदाता

कॉन्फ़िगर करने योग्य सेवा ऑब्जेक्ट बनाने के लिए प्रदाता का उपयोग किया जाता है। आप कॉन्फ़िगरेशन फ़ंक्शन से सेवा सेटिंग कॉन्फ़िगर कर सकते हैं। यह $get()फ़ंक्शन का उपयोग कर एक मान देता है । $getसमारोह कोणीय में रन चरण पर निष्पादित हो जाता है।

app.provider('configurableService', function() {
    var name = '';
    //this method can be be available at configuration time inside app.config.
    this.setName = function(newName) {
        name = newName;
    };
    this.$get = function() {
        var getName = function() {
             return name;
        };
        return {
            getName: getName //exposed object to where it gets injected.
        };
    };
});

प्रयोग

जब आपको इसे उपलब्ध कराने से पहले अपनी सेवा ऑब्जेक्ट के लिए मॉड्यूल-वार कॉन्फ़िगरेशन प्रदान करने की आवश्यकता होती है, उदाहरण के लिए। मान लीजिए कि आप अपने एपीआई यूआरएल को अपने पर्यावरण के आधार पर सेट करना चाहते हैं dev, stageयाprod

ध्यान दें

केवल प्रदाता कोणीय के कॉन्फ़िगर चरण में उपलब्ध होगा, जबकि सेवा और कारखाना नहीं हैं।

उम्मीद है कि इसने फैक्टरी, सेवा और प्रदाता के बारे में आपकी समझ को मंजूरी दे दी है ।


AngularJS मेलिंग सूची से मुझे एक अद्भुत धागा मिला जो सेवा बनाम फैक्ट्री बनाम प्रदाता और उनके इंजेक्शन उपयोग को बताता है। उत्तर संकलित करना:

सेवाएं

सिंटेक्स: module.service( 'serviceName', function );
परिणाम: जब सेवा नाम को इंजेक्शन योग्य तर्क के रूप में घोषित किया जाता है तो आपको फ़ंक्शन का एक उदाहरण प्रदान किया जाएगा। दूसरे शब्दों में new FunctionYouPassedToService()

कारखाना

सिंटेक्स: module.factory( 'factoryName', function );
परिणाम: फैक्ट्रीनाम को इंजेक्शन योग्य तर्क के रूप में घोषित करते समय आपको मॉड्यूल.फैक्टरी को पारित फ़ंक्शन संदर्भ का आह्वान करके लौटाए गए मान के साथ प्रदान किया जाएगा।

प्रदाताओं

सिंटेक्स: module.provider( 'providerName', function );
परिणाम: प्रदाता नाम को इंजेक्शन योग्य तर्क के रूप में घोषित करते समय आपको (new ProviderFunction()).$get() प्रदान किया जाएगा (new ProviderFunction()).$get() । $ प्राप्त विधि कहने से पहले कन्स्ट्रक्टर फ़ंक्शन को तुरंत चालू किया जाता है - ProviderFunction फ़ंक्शन फ़ंक्शन संदर्भ मॉड्यूल.प्रोवाइडर को पास किया जाता है।

प्रदाता के पास लाभ होता है कि उन्हें मॉड्यूल कॉन्फ़िगरेशन चरण के दौरान कॉन्फ़िगर किया जा सकता है।

प्रदत्त कोड के लिए here देखें।

मिस्को द्वारा यहां एक और आगे स्पष्टीकरण दिया गया है:

provide.value('a', 123);

function Controller(a) {
  expect(a).toEqual(123);
}

इस मामले में इंजेक्टर बस वैल्यू को वापस देता है। लेकिन क्या होगा यदि आप मूल्य की गणना करना चाहते हैं? फिर एक कारखाने का उपयोग करें

provide.factory('b', function(a) {
  return a*2;
});

function Controller(b) {
  expect(b).toEqual(246);
}

तो factory एक ऐसा कार्य है जो मूल्य बनाने के लिए ज़िम्मेदार है। ध्यान दें कि फैक्ट्री फ़ंक्शन अन्य निर्भरताओं के लिए पूछ सकता है।

लेकिन क्या होगा यदि आप अधिक ओओ बनना चाहते हैं और ग्रीटर नामक कक्षा है?

function Greeter(a) {
  this.greet = function() {
    return 'Hello ' + a;
  }
}

फिर तत्काल करने के लिए आपको लिखना होगा

provide.factory('greeter', function(a) {
  return new Greeter(a);
});

फिर हम इस तरह नियंत्रक में 'greeter' के लिए पूछ सकते हैं

function Controller(greeter) {
  expect(greeter instanceof Greeter).toBe(true);
  expect(greeter.greet()).toEqual('Hello 123');
}

लेकिन यह रास्ता बहुत शब्दशः है। इसे लिखने का एक छोटा तरीका provider.service('greeter', Greeter);

लेकिन क्या होगा यदि हम इंजेक्शन से पहले Greeter कक्षा को कॉन्फ़िगर करना चाहते थे? फिर हम लिख सकते थे

provide.provider('greeter2', function() {
  var salutation = 'Hello';
  this.setSalutation = function(s) {
    salutation = s;
  }

  function Greeter(a) {
    this.greet = function() {
      return salutation + ' ' + a;
    }
  }

  this.$get = function(a) {
    return new Greeter(a);
  };
});

फिर हम यह कर सकते हैं:

angular.module('abc', []).config(function(greeter2Provider) {
  greeter2Provider.setSalutation('Halo');
});

function Controller(greeter2) {
  expect(greeter2.greet()).toEqual('Halo 123');
}

एक साइड नोट के रूप में, service , factory , और value सभी प्रदाता से व्युत्पन्न होते हैं।

provider.service = function(name, Class) {
  provider.provide(name, function() {
    this.$get = function($injector) {
      return $injector.instantiate(Class);
    };
  });
}

provider.factory = function(name, factory) {
  provider.provide(name, function() {
    this.$get = function($injector) {
      return $injector.invoke(factory);
    };
  });
}

provider.value = function(name, value) {
  provider.factory(name, function() {
    return value;
  });
};

यह उत्तर विषय / प्रश्न को संबोधित करता है

फैक्ट्री, सेवा और कॉन्स्टेंट कैसे - प्रदाता नुस्खा के शीर्ष पर सिंटैक्टिक चीनी हैं?

या

कैसे कारखाने, servic और प्रदाताओं आंतरिक रूप से simailar हैं

मूल रूप से क्या होता है

जब आप factory()इसे सेट करते हैं तो आपको functionप्रदाता के दूसरे तर्क में प्रदान किया जाता है $getऔर इसे वापस लौटाता है ( provider(name, {$get:factoryFn })), आपको जो कुछ मिलता है वह है providerलेकिन इसके अलावा कोई संपत्ति / विधि नहीं$get है provider(इसका मतलब है कि आप इसे कॉन्फ़िगर नहीं कर सकते हैं)

कारखाने का स्रोत कोड

function factory(name, factoryFn, enforce) {
    return provider(name, {
      $get: enforce !== false ? enforceReturnValue(name, factoryFn) : factoryFn
    });
};

जब एक बनाने service()यह वापसी आप के साथ एक (कारखाना) उपलब्ध कराने के एक functionइंजेक्शन कि constructor(निर्माता आप अपनी सेवा में प्रदान की जाती के कहने वापसी) है और यह रिटर्न

सेवा का स्रोत कोड

function service(name, constructor) {
    return factory(name, ['$injector', function($injector) {
      return $injector.instantiate(constructor);
    }]);
};

तो मूल रूप से दोनों मामलों में आप अंततः एक प्रदाता $ प्राप्त करते हैं जो आपके द्वारा प्रदान किए गए आपके फ़ंक्शन पर सेट हो जाते हैं, लेकिन आप कॉन्फ़िगर ब्लॉक के लिए मूल रूप से प्रदाता () में प्रदान कर सकते हैं, तो आप $ से अधिक कुछ भी दे सकते हैं


संदर्भ के रूप में इस पृष्ठ और docs.angularjs.org/guide/providers (जो मैंने देखा था पिछली बार में काफी सुधार हुआ है) के रूप में उपयोग करते हुए, मैंने निम्नलिखित वास्तविक (-ish) विश्व डेमो को एक साथ रखा जो प्रदाता के 5 स्वादों में से 4 का उपयोग करता है; मूल्य, निरंतर, फैक्टरी और पूर्ण उड़ा प्रदाता।

HTML:

<div ng-controller="mainCtrl as main">
    <h1>{{main.title}}*</h1>
    <h2>{{main.strapline}}</h2>
    <p>Earn {{main.earn}} per click</p>
    <p>You've earned {{main.earned}} by clicking!</p>
    <button ng-click="main.handleClick()">Click me to earn</button>
    <small>* Not actual money</small>
</div>

एप्लिकेशन

var app = angular.module('angularProviders', []);

// A CONSTANT is not going to change
app.constant('range', 100);

// A VALUE could change, but probably / typically doesn't
app.value('title', 'Earn money by clicking');
app.value('strapline', 'Adventures in ng Providers');

// A simple FACTORY allows us to compute a value @ runtime.
// Furthermore, it can have other dependencies injected into it such
// as our range constant.
app.factory('random', function randomFactory(range) {
    // Get a random number within the range defined in our CONSTANT
    return Math.random() * range;
});

// A PROVIDER, must return a custom type which implements the functionality 
// provided by our service (see what I did there?).
// Here we define the constructor for the custom type the PROVIDER below will 
// instantiate and return.
var Money = function(locale) {

    // Depending on locale string set during config phase, we'll
    // use different symbols and positioning for any values we 
    // need to display as currency
    this.settings = {
        uk: {
            front: true,
            currency: '£',
            thousand: ',',
            decimal: '.'
        },
        eu: {
            front: false,
            currency: '€',
            thousand: '.',
            decimal: ','
        }
    };

    this.locale = locale;
};

// Return a monetary value with currency symbol and placement, and decimal 
// and thousand delimiters according to the locale set in the config phase.
Money.prototype.convertValue = function(value) {

    var settings = this.settings[this.locale],
        decimalIndex, converted;

    converted = this.addThousandSeparator(value.toFixed(2), settings.thousand);

    decimalIndex = converted.length - 3;

    converted = converted.substr(0, decimalIndex) +
        settings.decimal +
        converted.substr(decimalIndex + 1);    

    converted = settings.front ?
            settings.currency + converted : 
            converted + settings.currency; 

    return converted;   
};

// Add supplied thousand separator to supplied value
Money.prototype.addThousandSeparator = function(value, symbol) {
   return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, symbol);
};

// PROVIDER is the core recipe type - VALUE, CONSTANT, SERVICE & FACTORY
// are all effectively syntactic sugar built on top of the PROVIDER construct
// One of the advantages of the PROVIDER is that we can configure it before the
// application starts (see config below).
app.provider('money', function MoneyProvider() {

    var locale;

    // Function called by the config to set up the provider
    this.setLocale = function(value) {
        locale = value;   
    };

    // All providers need to implement a $get method which returns
    // an instance of the custom class which constitutes the service
    this.$get = function moneyFactory() {
        return new Money(locale);
    };
});

// We can configure a PROVIDER on application initialisation.
app.config(['moneyProvider', function(moneyProvider) {
    moneyProvider.setLocale('uk');
    //moneyProvider.setLocale('eu'); 
}]);

// The ubiquitous controller
app.controller('mainCtrl', function($scope, title, strapline, random, money) {

    // Plain old VALUE(s)
    this.title = title;
    this.strapline = strapline;

    this.count = 0;

    // Compute values using our money provider    
    this.earn = money.convertValue(random); // random is computed @ runtime
    this.earned = money.convertValue(0);

    this.handleClick = function() { 
        this.count ++;
        this.earned = money.convertValue(random * this.count);
    };
});

कार्य demo


docs.angularjs.org/guide/providers से सारांश :

  • पांच नुस्खा प्रकार हैं जो वस्तुओं को बनाने के तरीके को परिभाषित करते हैं: Value , Factory , Service , Provider और Constant
  • फैक्टरी और सेवा सबसे अधिक उपयोग की जाने वाली व्यंजन हैं। उनके बीच एकमात्र अंतर यह है कि सेवा नुस्खा एक कस्टम प्रकार की वस्तुओं के लिए बेहतर काम करता है, जबकि फैक्टरी जावास्क्रिप्ट प्राइमेटिव्स और कार्यों का उत्पादन कर सकती है।
  • प्रदाता नुस्खा कोर नुस्खा प्रकार है और अन्य सभी लोगों को उस पर सिर्फ वाक्यात्मक चीनी हैं।
  • प्रदाता सबसे जटिल नुस्खा प्रकार है। आपको इसकी आवश्यकता नहीं है जब तक कि आप कोड का एक पुन: प्रयोज्य टुकड़ा नहीं बना रहे हैं जिसके लिए वैश्विक कॉन्फ़िगरेशन की आवश्यकता है।

एसओ से सर्वश्रेष्ठ जवाब:

https://.com/a/26924234/165673 (<- GOOD) https://.com/a/27263882/165673
https://.com/a/16566144/165673


मुझे बहुत सारे उत्कृष्ट उत्तर पता हैं लेकिन मुझे डिफ़ॉल्ट रूप से अधिकांश मामलों के लिए
1. का उपयोग करने का अपना अनुभव साझा करना होगा 2. उस विशिष्ट उदाहरण को सेवा बनाने के लिए उपयोग किया जाता हैservice
factory

// factory.js ////////////////////////////
(function() {
'use strict';
angular
    .module('myApp.services')
    .factory('xFactory', xFactoryImp);
xFactoryImp.$inject = ['$http'];

function xFactoryImp($http) {
    var fac = function (params) {
        this._params = params; // used for query params
    };

    fac.prototype.nextPage = function () {
        var url = "/_prc";

        $http.get(url, {params: this._params}).success(function(data){ ...
    }
    return fac;
}
})();

// service.js //////////////////////////
(function() {
'use strict';
angular
    .module('myApp.services')
    .service('xService', xServiceImp);
xServiceImp.$inject = ['$http'];

function xServiceImp($http) {  
    this._params = {'model': 'account','mode': 'list'};

    this.nextPage = function () {
        var url = "/_prc";

        $http.get(url, {params: this._params}).success(function(data){ ...
    }       
}
})();

और उपयोग कर रहे हैं:

controller: ['xFactory', 'xService', function(xFactory, xService){

        // books = new instance of xFactory for query 'book' model
        var books = new xFactory({'model': 'book', 'mode': 'list'});

        // accounts = new instance of xFactory for query 'accounts' model
        var accounts = new xFactory({'model': 'account', 'mode': 'list'});

        // accounts2 = accounts variable
        var accounts2 = xService;
... 

पहले से ही अच्छे जवाब हैं, लेकिन मैं इसे साझा करना चाहता हूं।

सबसे पहले: प्रदाता एक service(सिंगलटन ऑब्जेक्ट) बनाने का तरीका / नुस्खा है जो $ इंजेक्टर द्वारा इंजेक्शन किया जाता है (कैसे अंगुलाजेएस आईओसी पैटर्न के बारे में जाता है)।

और मूल्य, फैक्टरी, सेवा और निरंतर (4 तरीके) - प्रदाता मार्ग / रसीद पर सिंटेक्टिक चीनी ।

इसमें Service vs Factoryहिस्सा शामिल किया गया है: https://www.youtube.com/watch?v=BLzNCkPn3ao

सेवाnew वास्तव में कीवर्ड के बारे में है जो हम जानते हैं कि 4 चीजें हैं:

  1. ब्रांड नई वस्तु बनाता है
  2. इसे अपनी prototypeवस्तु से जोड़ता है
  3. से जोड़ता contextहैthis
  4. और रिटर्न this

और कारखाना फैक्टरी पैटर्न के बारे में है - इसमें ऐसे कार्य शामिल हैं जो उस सेवा की तरह ऑब्जेक्ट लौटाते हैं।

  1. अन्य सेवाओं का उपयोग करने की क्षमता (निर्भरताएं हैं)
  2. सेवा प्रारंभिकरण
  3. देरी / आलसी प्रारंभिकरण

और यह सरल / लघु वीडियो: प्रदाता भी शामिल है : https://www.youtube.com/watch?v=HvTZbQ_hUZY (वहां आप देख सकते हैं कि वे कारखाने से प्रदाता तक कैसे जाते हैं)

ऐप पूरी तरह से प्रारंभ / प्रारंभ होने से पहले प्रदाता रेसिपी ज्यादातर ऐप कॉन्फ़िगरेशन में उपयोग किया जाता है।


मेरे लिए, रहस्योद्घाटन तब आया जब मुझे एहसास हुआ कि वे सभी एक ही तरीके से काम करते हैं: एक बार कुछ चलकर , उन्हें प्राप्त होने वाले मूल्य को संग्रहित करके, और तब निर्भरता इंजेक्शन के माध्यम से संदर्भित होने पर उसी संग्रहित मूल्य को खांसी दें ।

कहो हमारे पास है:

app.factory('a', fn);
app.service('b', fn);
app.provider('c', fn);

तीनों के बीच का अंतर यह है कि:

  1. aसंग्रहित मूल्य चलने से आता है fn
  2. bभंडारित मूल्य newआईएनजी से आता है fn
  3. cसंग्रहित मूल्य पहले newआईएनजी द्वारा एक उदाहरण प्राप्त करने से आता है fn, और फिर $getउदाहरण की एक विधि चला रहा है ।

जिसका मतलब है कि AngularJS के अंदर कैश ऑब्जेक्ट की तरह कुछ है, जिसका प्रत्येक इंजेक्शन का मान केवल एक बार असाइन किया जाता है, जब उन्हें पहली बार इंजेक्शन दिया जाता है, और कहां:

cache.a = fn()
cache.b = new fn()
cache.c = (new fn()).$get()

यही कारण है कि हम thisसेवाओं में उपयोग करते हैं, और this.$getप्रदाताओं में परिभाषित करते हैं ।


पार्टी के लिए बहुत देर हो चुकी है। लेकिन मैंने सोचा कि कारखाने, सेवा और प्रदाता पद्धतियों का उपयोग करके कोणीय जेएस कस्टम सर्विसेज के विकास पर कौन सीखना (या स्पष्टता) सीखना चाहते हैं।

मैं इस वीडियो में आया जो अंगुलरजेएस कस्टम सेवाओं के विकास के लिए कारखाने, सेवा और प्रदाता पद्धतियों के बारे में स्पष्ट रूप से बताता है:

https://www.youtube.com/watch?v=oUXku28ex-M

स्रोत कोड: http://www.techcbt.com/Post/353/Angular-JS-basics/how-to-develop-angularjs-custom-service

पाठकों को लाभ पहुंचाने के लिए यहां पोस्ट किया गया कोड सीधे उपरोक्त स्रोत से कॉपी किया गया है।

"कारखाने" आधारित कस्टम सेवा के लिए कोड निम्नानुसार है (जो http सेवा को कॉल करने के साथ सिंक और एसिंक संस्करण दोनों के साथ जाता है):

var app = angular.module("app", []);
app.controller('emp', ['$scope', 'calcFactory',
  function($scope, calcFactory) {
    $scope.a = 10;
    $scope.b = 20;

    $scope.doSum = function() {
      //$scope.sum = calcFactory.getSum($scope.a, $scope.b); //synchronous
      calcFactory.getSum($scope.a, $scope.b, function(r) { //aynchronous
        $scope.sum = r;
      });
    };

  }
]);

app.factory('calcFactory', ['$http', '$log',
  function($http, $log) {
    $log.log("instantiating calcFactory..");
    var oCalcService = {};

    //oCalcService.getSum = function(a,b){
    //	return parseInt(a) + parseInt(b);
    //};

    //oCalcService.getSum = function(a, b, cb){
    //	var s = parseInt(a) + parseInt(b);
    //	cb(s);
    //};

    oCalcService.getSum = function(a, b, cb) { //using http service

      $http({
        url: 'http://localhost:4467/Sum?a=' + a + '&b=' + b,
        method: 'GET'
      }).then(function(resp) {
        $log.log(resp.data);
        cb(resp.data);
      }, function(resp) {
        $log.error("ERROR occurred");
      });
    };

    return oCalcService;
  }
]);

कस्टम सेवाओं के लिए "सेवा" पद्धति के लिए कोड (यह 'फैक्ट्री' के समान ही है, लेकिन सिंटैक्स बिंदु दृश्य से अलग है):

var app = angular.module("app", []);
app.controller('emp', ['$scope', 'calcService', function($scope, calcService){
	$scope.a = 10;
	$scope.b = 20;

	$scope.doSum = function(){
		//$scope.sum = calcService.getSum($scope.a, $scope.b);
		
		calcService.getSum($scope.a, $scope.b, function(r){
			$scope.sum = r;
		});		
	};

}]);

app.service('calcService', ['$http', '$log', function($http, $log){
	$log.log("instantiating calcService..");
	
	//this.getSum = function(a,b){
	//	return parseInt(a) + parseInt(b);
	//};

	//this.getSum = function(a, b, cb){
	//	var s = parseInt(a) + parseInt(b);
	//	cb(s);
	//};

	this.getSum = function(a, b, cb){
		$http({
			url: 'http://localhost:4467/Sum?a=' + a + '&b=' + b,
			method: 'GET'
		}).then(function(resp){
			$log.log(resp.data);
			cb(resp.data);
		},function(resp){
			$log.error("ERROR occurred");
		});
	};

}]);

कस्टम सेवाओं के लिए "प्रदाता" पद्धति के लिए कोड (यह आवश्यक है, यदि आप सेवा विकसित करना चाहते हैं जिसे कॉन्फ़िगर किया जा सकता है):

var app = angular.module("app", []);
app.controller('emp', ['$scope', 'calcService', function($scope, calcService){
	$scope.a = 10;
	$scope.b = 20;

	$scope.doSum = function(){
		//$scope.sum = calcService.getSum($scope.a, $scope.b);
		
		calcService.getSum($scope.a, $scope.b, function(r){
			$scope.sum = r;
		});		
	};

}]);

app.provider('calcService', function(){

	var baseUrl = '';

	this.config = function(url){
		baseUrl = url;
	};

	this.$get = ['$log', '$http', function($log, $http){
		$log.log("instantiating calcService...")
		var oCalcService = {};

		//oCalcService.getSum = function(a,b){
		//	return parseInt(a) + parseInt(b);
		//};

		//oCalcService.getSum = function(a, b, cb){
		//	var s = parseInt(a) + parseInt(b);
		//	cb(s);	
		//};

		oCalcService.getSum = function(a, b, cb){

			$http({
				url: baseUrl + '/Sum?a=' + a + '&b=' + b,
				method: 'GET'
			}).then(function(resp){
				$log.log(resp.data);
				cb(resp.data);
			},function(resp){
				$log.error("ERROR occurred");
			});
		};		

		return oCalcService;
	}];

});

app.config(['calcServiceProvider', function(calcServiceProvider){
	calcServiceProvider.config("http://localhost:4467");
}]);

अंत में यूआई जो उपर्युक्त सेवाओं में से किसी के साथ काम करता है:

<html>
<head>
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js" ></script>
	<script type="text/javascript" src="t03.js"></script>
</head>
<body ng-app="app">
	<div ng-controller="emp">
		<div>
			Value of a is {{a}},
			but you can change
			<input type=text ng-model="a" /> <br>

			Value of b is {{b}},
			but you can change
			<input type=text ng-model="b" /> <br>

		</div>
		Sum = {{sum}}<br>
		<button ng-click="doSum()">Calculate</button>
	</div>
</body>
</html>





angularjs-provider