AngularJS में निर्भरता इंजेक्शन क्या है?
डिपेंडेंसी इंजेक्शन एक सॉफ्टवेयर डिज़ाइन पैटर्न है जो निर्भरता को हल करने के लिए नियंत्रण के व्युत्क्रम को लागू करता है।
नियंत्रण का उलटा : इसका मतलब है कि ऑब्जेक्ट अन्य ऑब्जेक्ट नहीं बनाते हैं, जिस पर वे अपना काम करने के लिए भरोसा करते हैं। इसके बजाय, वे इन वस्तुओं को एक बाहरी स्रोत से प्राप्त करते हैं। यह निर्भरता इंजेक्शन का आधार बनाता है जिसमें यदि एक वस्तु दूसरे पर निर्भर है; प्राथमिक ऑब्जेक्ट निर्भर ऑब्जेक्ट बनाने की ज़िम्मेदारी नहीं लेता है और फिर उसके तरीकों का उपयोग करता है। इसके बजाय, एक बाहरी स्रोत (जो कि AngularJS में, AngularJS ढांचा ही है) निर्भर वस्तु बनाता है और इसे आगे उपयोग के लिए स्रोत वस्तु को देता है।
तो आइए पहले समझते हैं कि निर्भरता क्या है।
उपरोक्त आरेख डेटाबेस प्रोग्रामिंग में एक रोज़ अनुष्ठान का एक सरल उदाहरण दिखाता है।
- 'मॉडल' बॉक्स में "मॉडल वर्ग" दर्शाया गया है जो सामान्य रूप से डेटाबेस के साथ बातचीत करने के लिए बनाया गया है। इसलिए अब डेटाबेस कार्य करने के लिए "मॉडल वर्ग" के लिए एक निर्भरता है।
- निर्भरता इंजेक्शन के द्वारा, हम डेटाबेस से सभी जानकारी हड़पने के लिए और मॉडल वर्ग में आने के लिए एक सेवा बनाते हैं।
इस ट्यूटोरियल के शेष भाग में, हम निर्भरता इंजेक्शन पर अधिक देखेंगे और यह कैसे AngularJS में पूरा किया जाता है।
इस ट्यूटोरियल में, आप सीखेंगे-
- कौन से कंपोनेंट को AngularJS में डिपेंडेंसी के रूप में इंजेक्ट किया जा सकता है
- निर्भरता इंजेक्शन का उदाहरण
- मान घटक
- सर्विस
कौन से कंपोनेंट को AngularJS में डिपेंडेंसी के रूप में इंजेक्ट किया जा सकता है
Angular.JS में, एक "इंजेक्टेबल फैक्टरी विधि" या "कंस्ट्रक्टर फ़ंक्शन" का उपयोग करके निर्भरताएं इंजेक्ट की जाती हैं।
इन घटकों को "सेवा" और "मूल्य" घटकों पर निर्भरता के रूप में इंजेक्ट किया जा सकता है। हमने इसे पहले वाले विषय में $ http सेवा के साथ देखा है।
हमने पहले ही देखा है कि $ http सेवा का उपयोग AngularJS के भीतर एक PHP अनुप्रयोग के माध्यम से MySQL या MS SQL सर्वर डेटाबेस से डेटा प्राप्त करने के लिए किया जा सकता है।
$ Http सेवा आम तौर पर निम्नलिखित तरीके से नियंत्रक के भीतर से परिभाषित की जाती है।
sampleApp.controller ('AngularJSController', function ($scope, $http)
अब जब नियंत्रक में $ http सेवा को परिभाषित किया गया है जैसा कि ऊपर दिखाया गया है। इसका अर्थ है कि नियंत्रक के पास अब $ http सेवा पर निर्भरता है।
इसलिए जब उपरोक्त कोड निष्पादित हो जाता है, तो AngularJS निम्नलिखित चरणों का पालन करेगा;
- यह देखने के लिए जांचें कि क्या "$ http सेवा" को तत्काल किया गया है। चूंकि हमारा "नियंत्रक" अब "$ http सेवा" पर निर्भर करता है, इसलिए इस सेवा का एक उद्देश्य हमारे नियंत्रक को उपलब्ध कराना होगा।
- यदि AngularJS को पता चलता है कि $ http सेवा को तत्काल नहीं बनाया गया है, तो AngularJS $ http ऑब्जेक्ट बनाने के लिए 'फ़ैक्टरी' फ़ंक्शन का उपयोग करता है।
- Angular.JS के भीतर इंजेक्टर तो आगे की प्रक्रिया के लिए हमारे नियंत्रक को $ http सेवा का एक उदाहरण प्रदान करता है।
अब चूंकि निर्भरता हमारे नियंत्रक में अंतःक्षिप्त है, इसलिए हम अब आगे की प्रक्रिया के लिए $ http सेवा के भीतर आवश्यक कार्य कर सकते हैं।
निर्भरता इंजेक्शन का उदाहरण
निर्भरता इंजेक्शन 2 तरीकों से लागू किया जा सकता है
- एक "मूल्य घटक" के माध्यम से है
- एक और "सेवा" के माध्यम से है
आइए दोनों तरीकों के कार्यान्वयन को अधिक विस्तार से देखें।
1) मूल्य घटक
यह अवधारणा एक साधारण जावास्क्रिप्ट ऑब्जेक्ट बनाने के तथ्य पर आधारित है और इसे आगे की प्रक्रिया के लिए नियंत्रक को पास करना है।
यह नीचे दिए गए दो चरणों का उपयोग करके लागू किया गया है
चरण 1) मूल्य घटक का उपयोग करके एक जावास्क्रिप्ट ऑब्जेक्ट बनाएं और इसे अपने मुख्य AngularJS.JS मॉड्यूल से संलग्न करें।
मूल्य घटक दो मापदंडों पर ले जाता है; एक कुंजी है, और दूसरी जावास्क्रिप्ट ऑब्जेक्ट का मूल्य है जो बनाया गया है।
चरण 2) Angular.JS नियंत्रक से जावास्क्रिप्ट ऑब्जेक्ट को एक्सेस करें
Event Registration Guru99 Global Event
{{ID}}
उपरोक्त कोड उदाहरण में, नीचे दिए गए मुख्य कदम उठाए जा रहे हैं
-
sampleApp.value ("ट्यूटोरियलआईडी", 5);
Angular.JS JS मॉड्यूल के मान फ़ंक्शन का उपयोग "ट्यूटोरियलआईडी" और "5" के मूल्य नामक एक कुंजी-मूल्य जोड़ी बनाने के लिए किया जा रहा है।
-
sampleApp.controller('AngularJSController', function ($scope,TutorialID)
TutorialID चर अब फंक्शन पैरामीटर के रूप में कंट्रोलर के लिए सुलभ हो जाता है।
-
$scope.ID =TutorialID;
ट्यूटोरियलआईडी का मान जो 5 है, अब $ गुंजाइश ऑब्जेक्ट में आईडी नामक एक अन्य चर को सौंपा जा रहा है। ऐसा इसलिए किया जा रहा है ताकि नियंत्रक से दृश्य में 5 का मान पारित किया जा सके।
-
{{आईडी}}
आईडी पैरामीटर को एक अभिव्यक्ति के रूप में दृश्य में प्रदर्शित किया जा रहा है। तो पृष्ठ पर '5' का आउटपुट प्रदर्शित होगा।
जब उपरोक्त कोड निष्पादित किया जाता है, तो आउटपुट नीचे दिखाया जाएगा
2) सेवा
सेवा को एक सिंगलटन जावास्क्रिप्ट ऑब्जेक्ट के रूप में परिभाषित किया गया है जिसमें ऐसे फ़ंक्शन होते हैं जिन्हें आप अपने नियंत्रक में उजागर और इंजेक्ट करना चाहते हैं।
उदाहरण के लिए, "$ http" Angular.JS में एक सेवा है जो आपके नियंत्रकों में इंजेक्ट होने पर आवश्यक कार्य प्रदान करता है
(get (), query (), save (), remove (), delete ())।
इन कार्यों को तब आपके नियंत्रक से तदनुसार मंगवाया जा सकता है।
आइए एक सरल उदाहरण देखें कि आप अपनी स्वयं की सेवा कैसे बना सकते हैं। हम एक सरल जोड़ सेवा बनाने जा रहे हैं, जिसमें दो नंबर शामिल हैं।
Event Registration Guru99 Global Event
Result: {{result}}
उपरोक्त उदाहरण में, निम्नलिखित कदम उठाए गए हैं
-
mainApp.service('AdditionService', function()
यहां हम अपने मुख्य AngularJS JS मॉड्यूल के सेवा पैरामीटर का उपयोग करके 'AdditionService' नामक एक नई सेवा बना रहे हैं।
-
this.Addition = function(a,b)
यहां हम अपनी सेवा के भीतर एक नया फ़ंक्शन जोड़ रहे हैं जिसे Addition कहा जाता है। इसका मतलब यह है कि जब AngularJS हमारे कंट्रोलर को हमारे कंट्रोलर के अंदर इंस्टेंट करता है, तब हम 'एडिशन' फंक्शन को एक्सेस कर पाएंगे। इस फ़ंक्शन परिभाषा में, हम कह रहे हैं कि यह फ़ंक्शन दो मापदंडों को स्वीकार करता है, ए और बी।
-
return a+b;
यहां हम अपने अतिरिक्त फ़ंक्शन के शरीर को परिभाषित कर रहे हैं जो बस मापदंडों को जोड़ता है और जोड़े गए मूल्य को वापस करता है।
-
mainApp.controller('DemoController', function($scope, AdditionService)
यह मुख्य कदम है जिसमें निर्भरता इंजेक्शन शामिल है। हमारी नियंत्रक परिभाषा में, अब हम अपनी 'AdditionService' सेवा का उल्लेख कर रहे हैं। जब AngularJS इसे देखता है, तो यह 'AdditionService' के प्रकार को हटा देगा।
-
$scope.result = AdditionService.Addition(5,6);
अब हम 'Addition' फंक्शन को एक्सेस कर रहे हैं, जिसे हमारी सेवा में परिभाषित किया गया है और इसे कंट्रोलर के $ स्कोप ऑब्जेक्ट में असाइन किया गया है।
तो यह एक सरल उदाहरण है कि कैसे हम अपनी सेवा को परिभाषित कर सकते हैं और अपने नियंत्रक के अंदर उस सेवा की कार्यक्षमता को इंजेक्ट कर सकते हैं।
सारांश:
- डिपेंडेंसी इंजेक्शन जैसा कि नाम से पता चलता है कि रन टाइम पर मॉड्यूल में निर्भर कार्यक्षमता को इंजेक्ट करने की प्रक्रिया है।
- निर्भरता इंजेक्शन का उपयोग करने से अधिक पुन: उपयोग करने योग्य कोड होने में मदद मिलती है। यदि आपके पास सामान्य कार्यक्षमता है जो कई एप्लिकेशन मॉड्यूल में उपयोग की जाती है, तो सबसे अच्छा तरीका उस कार्यक्षमता के साथ एक केंद्रीय सेवा को परिभाषित करना है और फिर उस एप्लिकेशन को आपके एप्लिकेशन मॉड्यूल में निर्भरता के रूप में इंजेक्ट करना है।
- AngularJS के मान ऑब्जेक्ट का उपयोग आपके नियंत्रक में सरल जावास्क्रिप्ट वस्तुओं को इंजेक्ट करने के लिए किया जा सकता है।
- सेवा मॉड्यूल का उपयोग आपकी कस्टम सेवाओं को परिभाषित करने के लिए किया जा सकता है जो कि कई AngularJS मॉड्यूल में फिर से उपयोग की जा सकती हैं।