🏧 👇🏿 👩🏼‍🏭 AngularJS में सेवा प्रकारों को समझना (स्थिर, मूल्य, कारखाना, सेवा, प्रदाता) 🤦🏼 🏬 👃🏼

कोणीय विभिन्न प्रकार की सेवाओं या सेवाओं के साथ आता है, जिनमें से प्रत्येक का उपयोग अपनी स्थिति में किया जाता है।
ध्यान रखें कि सेवाएं, प्रकार की परवाह किए बिना, हमेशा सिंगललेटोन (अकेला) हैं।

नोट: सिंगलटन एक डिज़ाइन पैटर्न है जो एक वर्ग को प्रतिबंधित करता है ताकि यह केवल एक ही उदाहरण हो। यह इस उदाहरण के साथ है कि जहां भी इसका उपयोग किया जाता है वहां काम किया जाता है।

आइए सेवाओं के प्रकारों पर आगे बढ़ते हैं

स्थिर

app.constant('fooConfig', { config1: true, config2: "Default config2" });

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

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

मूल्य

 app.value('fooConfig', { config1: true, config2: "Default config2 but it can changes" });

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

फ़ैक्टरी

 app.factory('foo', function() { var thisIsPrivate = "Private"; function getPrivate() { return thisIsPrivate; } return { variable: "This is public", getPrivate: getPrivate }; }); // ... app.factory('bar', function(a) { return a * 2; });

फैक्टरी सबसे अधिक इस्तेमाल की जाने वाली सेवा है। इसे समझना भी सबसे आसान है।

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

जैसा कि ऊपर उल्लेख किया गया है, सभी प्रकार foo.variable हैं, इसलिए यदि हम एक स्थान पर foo.variable बदलते हैं, तो यह अन्य स्थानों में भी बदल जाएगा।

सेवा

 app.service('foo', function() { var thisIsPrivate = "Private"; this.variable = "This is public"; this.getPrivate = function() { return thisIsPrivate; }; });

एक सेवा (एक विशिष्ट प्रकार के साथ एक सामान्य नाम को भ्रमित न करें) एक कारखाने की तरह काम करती है। अंतर यह है कि सेवा कंस्ट्रक्टर का उपयोग करती है, इसलिए जब आप पहली बार इसका उपयोग करते हैं, तो यह new Foo(); को निष्पादित करेगा new Foo(); वस्तु का एक उदाहरण बनाने के लिए। ध्यान रखें कि यदि आप इस सेवा का उपयोग करते हैं तो वही वस्तु अन्य स्थानों पर वापस आ जाएगी।

वास्तव में, सेवा निम्नलिखित कोड के बराबर है:

 app.factory('foo2', function() { return new Foobar(); }); function Foobar() { var thisIsPrivate = "Private"; this.variable = "This is public"; this.getPrivate = function() { return thisIsPrivate; }; }

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

यदि हमारे पास पहले से ही एक वर्ग है, और हम इसे अपनी सेवा में उपयोग करना चाहते हैं, तो हम यह कर सकते हैं:

 app.service('foo3', Foobar);

प्रदाता

एक प्रदाता एक विशेष तरीके से कॉन्फ़िगर किया गया कारखाना है। वास्तव में, नवीनतम उदाहरणों से कारखाना कुछ इस तरह दिखाई देगा:

 app.provider('foo', function() { return { $get: function() { var thisIsPrivate = "Private"; function getPrivate() { return thisIsPrivate; } return { variable: "This is public", getPrivate: getPrivate }; } }; });

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

जब कारखाने बहुत सरल हैं तो इस फॉर्म का उपयोग क्यों करें? क्योंकि प्रदाता को कॉन्फ़िगरेशन फ़ंक्शन में कॉन्फ़िगर किया जा सकता है। तो आप ऐसा कुछ कर सकते हैं:

 app.provider('foo', function() { var thisIsPrivate = "Private"; return { setPrivate: function(newVal) { thisIsPrivate = newVal; }, $get: function() { function getPrivate() { return thisIsPrivate; } return { variable: "This is public", getPrivate: getPrivate }; } }; }); app.config(function(fooProvider) { fooProvider.setPrivate('New value from config'); });

यहाँ हमने $get फ़ंक्शन से परे इस thisIsPrivate , और फिर setPrivate फ़ंक्शन को कॉन्फ़िगरेशन फ़ंक्शन में इस thisIsPrivate को संशोधित करने में सक्षम होने के लिए thisIsPrivate । आपको ऐसा करने की आवश्यकता क्यों है? क्या किसी फैक्ट्री में सिर्फ सेटर जोड़ना आसान नहीं है? एक और लक्ष्य है।

हम एक विशिष्ट वस्तु को लागू करना चाहते हैं, लेकिन हम अपनी आवश्यकताओं के लिए इसे अनुकूलित करने का एक तरीका चाहते हैं। उदाहरण के लिए: JSONP का उपयोग करते हुए एक संसाधन के लिए एक आवरण सेवा के लिए, हम उस URL को कॉन्फ़िगर करने में सक्षम होना चाहते हैं जो हमारे या तीसरे पक्ष की सेवाओं द्वारा उपयोग किया जाएगा, जैसे कि restangular । प्रदाता हमें अपने उद्देश्यों के लिए इसे पूर्व-कॉन्फ़िगर करने की अनुमति देता है।

ध्यान दें कि कॉन्फ़िगरेशन फ़ंक्शन में आपको नाम के रूप में nameProvider निर्दिष्ट करना होगा, name नहीं। अन्य सभी मामलों में name संकेत दिया गया है।

इसे देखकर, हम याद करते हैं कि हमने पहले ही अपने एप्लिकेशन में कुछ सेवाओं को कॉन्फ़िगर कर दिया है, उदाहरण के लिए, $routeProvider और $locationProvider $routeProvider $locationProvider क्रमशः राउटिंग और HTML5mode कॉन्फ़िगर $locationProvider हैं।

बोनस 1: डेकोरेटर

तो, आपने तय किया कि कुछ सेवा foo में greet समारोह का अभाव है और आप इसे जोड़ना चाहते हैं। क्या मुझे फैक्ट्री बदलनी चाहिए? नहीं! आप इसे सजा सकते हैं:

 app.config(function($provide) { $provide.decorator('foo', function($delegate) { $delegate.greet = function() { return "Hello, I am a new function of 'foo'"; }; return $delegate; }); });

$provide वह है जो सभी आंतरिक सेवाओं को बनाने के लिए कोणीय का उपयोग करता है। यदि हम चाहें, तो हम इसे मैन्युअल रूप से उपयोग कर सकते हैं, या बस हमारे मॉड्यूल में दिए गए कार्यों का उपयोग कर सकते हैं (आपको सजावट के लिए $provide करने की आवश्यकता है)। $provide में एक decorator फ़ंक्शन है जो हमें अपनी सेवाओं को सजाने की अनुमति देता है। इसे सजाए गए सेवा का नाम मिलता है, और कॉलबैक को $delegate , जो सेवा का मूल उदाहरण है।

यहां हम अपनी सेवा को सजाने के लिए जो चाहें कर सकते हैं। हमारे मामले में, हमने greet फ़ंक्शन को मूल सेवा में जोड़ा। फिर एक नई संशोधित सेवा लौटा दी।

अब, जब उपयोग किया जाता है, तो यह एक नया greet फ़ंक्शन होगा।

तृतीय-पक्ष डेवलपर्स से सेवाओं का उपयोग करते समय सेवाओं को सजाने की क्षमता सुविधाजनक है, जिसे आपकी परियोजना की नकल की आवश्यकता के बिना सजाया जा सकता है और आगे संशोधन किया जा सकता है।

नोट: आप एक स्थिरांक नहीं सजा सकते।

बोनस 2: नए उदाहरण बनाएँ

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

 //   function Person( json ) { angular.extend(this, json); } Person.prototype = { update: function() { //  (   :P) this.name = "Dave"; this.country = "Canada"; } }; Person.getById = function( id ) { //  -,   Person  id return new Person({ name: "Jesus", country: "Spain" }); }; //   app.factory('personService', function() { return { getById: Person.getById }; });

यहां हम एक Person ऑब्जेक्ट बनाते हैं जो ऑब्जेक्ट को इनिशियलाइज़ करने के लिए कुछ JSON डेटा प्राप्त करता है। फिर हमने अपने प्रोटोटाइप ( Person उदाहरणों में कार्य) और सीधे Person (कक्षा के समान कार्य) के कार्यों में एक फ़ंक्शन बनाया।

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

जब भी हम personService.getById कॉल करते हैं, तो हम एक नया Person ऑब्जेक्ट बनाते हैं, ताकि हम विभिन्न नियंत्रकों में इस सेवा का उपयोग कर सकें और यहां तक कि जब फैक्ट्री एक सिंगलटन हो, तो यह नई वस्तुओं का निर्माण करता है।

उनके उदाहरण के लिए जोश डेविड मिलर का सम्मान।

बोनस 3: कॉफीस्क्रिप्ट

कॉफीस्क्रिप्ट को आसानी से सेवाओं के साथ जोड़ा जा सकता है क्योंकि वे कक्षाएं बनाने के लिए एक अच्छा तरीका प्रदान करते हैं। आइए CoffeeScript का उपयोग करते हुए बोनस उदाहरण 2 देखें:

 app.controller 'MainCtrl', ($scope, personService) -> $scope.aPerson = personService.getById(1) app.controller 'SecondCtrl', ($scope, personService) -> $scope.aPerson = personService.getById(2) $scope.updateIt = () -> $scope.aPerson.update() class Person constructor: (json) -> angular.extend @, json update: () -> @name = "Dave" @country = "Canada" @getById: (id) -> new Person name: "Jesus" country: "Spain" app.factory 'personService', () -> { getById: Person.getById }

अब वह मेरी विनम्र राय में, सुंदर लग रहा है।
अब वह अनुवादक की विनम्र राय में बदतर लग रहा है।

निष्कर्ष

सेवाएँ कोणीय की सबसे आकर्षक विशेषताओं में से एक हैं। उन्हें बनाने के कई तरीके हैं, आपको बस हमारे मामले में सबसे उपयुक्त एक का चयन करने की आवश्यकता है

AngularJS में सेवा प्रकारों को समझना (स्थिर, मूल्य, कारखाना, सेवा, प्रदाता)