AngularJS डिपेंडेंसी इंजेक्शन कंपोनेंट्स

AngularJS में निर्भरता इंजेक्शन क्या है?

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

नियंत्रण का उलटाइसका मतलब है कि ऑब्जेक्ट अन्य ऑब्जेक्ट नहीं बनाते हैं जिन पर वे अपना काम करने के लिए निर्भर करते हैं। इसके बजाय, वे इन ऑब्जेक्ट को बाहरी स्रोत से प्राप्त करते हैं। यह AngularJS निर्भरता इंजेक्शन का आधार बनता है, जिसमें यदि एक ऑब्जेक्ट दूसरे पर निर्भर है; प्राथमिक ऑब्जेक्ट आश्रित ऑब्जेक्ट बनाने और फिर उसके तरीकों का उपयोग करने की जिम्मेदारी नहीं लेता है। इसके बजाय, एक बाहरी स्रोत (जो AngularJS में, AngularJS फ्रेमवर्क ही है) आश्रित ऑब्जेक्ट बनाता है और इसे आगे के उपयोग के लिए स्रोत ऑब्जेक्ट को देता है।

⚠️ संस्करण संबंधी टिप्पणी: AngularJS के लिए समर्थन जनवरी 2022 में समाप्त हो गया।बिना किसी सुरक्षा पैच के। आधुनिक एंगुलर @Injectable प्रदाताओं के माध्यम से इंजेक्ट करता है और इंजेक्ट()नीचे दिया गया कोड ऐतिहासिक रहेगा।

तो आइये सबसे पहले समझते हैं कि निर्भरता क्या है।

उपरोक्त चित्र डेटाबेस प्रोग्रामिंग में एक रोजमर्रा की क्रिया का एक सरल AngularJS निर्भरता इंजेक्शन उदाहरण दिखाता है।

• 'मॉडल' बॉक्स "मॉडल क्लास" को दर्शाता है जिसे आम तौर पर डेटाबेस के साथ इंटरैक्ट करने के लिए बनाया जाता है। तो अब डेटाबेस "मॉडल क्लास" के काम करने के लिए एक निर्भरता है।
• निर्भरता इंजेक्शन द्वारा, हम डेटाबेस से सभी जानकारी प्राप्त करने और मॉडल क्लास में लाने के लिए एक सेवा बनाते हैं।

इस ट्यूटोरियल के शेष भाग में, हम डिपेंडेंसी इंजेक्शन और इसे कैसे पूरा किया जाता है, इस पर अधिक विस्तार से चर्चा करेंगे। AngularJS.

AngularJS में किस कंपोनेंट को डिपेंडेंसी के रूप में इंजेक्ट किया जा सकता है?

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

इन घटकों को निर्भरता के रूप में “सेवा” और “मूल्य” घटकों के साथ इंजेक्ट किया जा सकता है। हमने इसे $http सेवा के साथ पिछले विषय में देखा है।

एक एंगुलरजेएस मॉड्यूल यह पांच विधियों के माध्यम से इंजेक्टेबल वस्तुओं को पंजीकृत करता है।

हम पहले ही देख चुके हैं कि $http सेवा का उपयोग AngularJS में किसी फ़ाइल से डेटा प्राप्त करने के लिए किया जा सकता है। MySQL या एमएस एसक्यूएल सर्वर डेटाबेस के माध्यम से PHP वेब एप्लीकेशन।

$http सेवा को सामान्यतः नियंत्रक के भीतर निम्नलिखित तरीके से परिभाषित किया जाता है।

sampleApp.controller ('AngularJSController', function ($scope, $http)

अब जब नियंत्रक में $http सेवा को परिभाषित किया गया है जैसा कि ऊपर दिखाया गया है। इसका मतलब है कि नियंत्रक अब $http सेवा पर निर्भर है।

इसलिए जब उपरोक्त कोड निष्पादित हो जाता है, तो AngularJS निम्नलिखित चरण निष्पादित करेगा;

1. यह देखने के लिए जाँच करें कि क्या “$http सेवा” को इंस्टैंशिएट किया गया है। चूँकि हमारा “कंट्रोलर” अब “$http सेवा” पर निर्भर करता है, इसलिए इस सेवा का एक ऑब्जेक्ट हमारे कंट्रोलर को उपलब्ध कराया जाना चाहिए।
2. यदि AngularJS को पता चलता है कि $http सेवा का इंस्टैंशिएशन नहीं किया गया है, तो AngularJS $http ऑब्जेक्ट के निर्माण के लिए 'फैक्ट्री' फ़ंक्शन का उपयोग करता है।
3. इसके बाद AngularJS के भीतर मौजूद इंजेक्टर, आगे की प्रक्रिया के लिए हमारे कंट्रोलर को $http सेवा का एक इंस्टेंस प्रदान करता है।

टिप्पणी प्रपत्र: अप्रत्यक्ष एनोटेशन यह पैरामीटर नामों को पढ़ता है, इसलिए मिनिफिकेशन इसे बाधित करता है। इनलाइन ऐरे नोटेशन और $inject दोनों इससे अप्रभावित रहते हैं; ng-app पर ng-strict-di अप्रत्यक्ष एनोटेशन को अस्वीकार करता है।

अब चूंकि निर्भरता हमारे नियंत्रक में डाल दी गई है, इसलिए हम आगे की प्रक्रिया के लिए $http सेवा के भीतर आवश्यक कार्यों को लागू कर सकते हैं।

निर्भरता इंजेक्शन का उदाहरण

इस उदाहरण में, हम सीखेंगे कि AngularJS में निर्भरता इंजेक्शन का उपयोग कैसे करें।

निर्भरता इंजेक्शन को 2 तरीकों से लागू किया जा सकता है

1. एक है “मूल्य घटक” के माध्यम से
2. दूसरा तरीका है “सेवा” के माध्यम से

आइये दोनों तरीकों के कार्यान्वयन पर अधिक विस्तार से नजर डालें।

1) मूल्य घटक

यह अवधारणा एक सरल संरचना बनाने पर आधारित है। Javaलिपि ऑब्जेक्ट को कंट्रोलर को आगे की प्रोसेसिंग के लिए पास करना।

इसे नीचे दिए गए दो चरणों का उपयोग करके कार्यान्वित किया जाता है

चरण 1) बनाओ Javaवैल्यू कंपोनेंट का उपयोग करके स्क्रिप्ट ऑब्जेक्ट बनाएं और इसे अपने मुख्य AngularJS मॉड्यूल से अटैच करें।

मूल्य घटक दो मापदंडों को ग्रहण करता है; एक कुंजी है, और दूसरा उसका मूल्य है। Javaस्क्रिप्ट ऑब्जेक्ट बनाया गया है।

चरण 2) तक पहुंच Javaस्क्रिप्ट ऑब्जेक्ट से AngularJS नियंत्रक

<! DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>

</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="sampleApp">

<div ng-controller="AngularJSController">
    <h3> Guru99 Global Event</h3>
    {{ID}}
</div>
<script>

    var sampleApp = angular.module('sampleApp',[]);
    sampleApp.value("TutorialID", 5);
    sampleApp.controller('AngularJSController', function($scope,TutorialID) {
        $scope.ID =TutorialID;
    });

</script>
</body>
</html>

ऊपर दिया गया कोड नीचे दिए गए चरणों को पूरा करता है।

1. sampleApp.value("TutorialID", 5);

   AngularJS मॉड्यूल के वैल्यू फ़ंक्शन का उपयोग करके "TutorialID" नामक एक की-वैल्यू जोड़ी और "5" का मान बनाया जा रहा है।

2. sampleApp.controller('AngularJSController', function ($scope,TutorialID)

   ट्यूटोरियलआईडी वैरिएबल अब नियंत्रक के लिए फ़ंक्शन पैरामीटर के रूप में सुलभ हो जाता है।

3.  $scope.ID =TutorialID;

   ट्यूटोरियलआईडी का मान, जो कि 5 है, अब आईडी नामक एक अन्य वेरिएबल को असाइन किया जा रहा है। $ गुंजाइश ऑब्जेक्ट। ऐसा इसलिए किया जा रहा है ताकि कंट्रोलर से व्यू को 5 का मान पास किया जा सके।

4. {{ID}}

   ID पैरामीटर को दृश्य में अभिव्यक्ति के रूप में प्रदर्शित किया जा रहा है। इसलिए '5' का आउटपुट पृष्ठ पर प्रदर्शित किया जाएगा।

जब उपरोक्त कोड निष्पादित किया जाएगा, तो आउटपुट नीचे दिखाया जाएगा

2) सेवा

सेवा को सिंगलटन के रूप में परिभाषित किया गया है Javaस्क्रिप्ट ऑब्जेक्ट में फ़ंक्शन का एक सेट होता है जिसे आप अपने कंट्रोलर में प्रदर्शित और इंजेक्ट करना चाहते हैं।

उदाहरण के लिए, AngularJS में "$http" एक सेवा है, जिसे आपके कंट्रोलर में इंजेक्ट करने पर आवश्यक कार्य प्रदान करता है।

( get() , query() , save() , remove() , delete() )।

इन कार्यों को तदनुसार आपके नियंत्रक से लागू किया जा सकता है।

आइए एक सरल उदाहरण देखें कि आप अपनी खुद की सेवा कैसे बना सकते हैं। हम एक सरल जोड़ सेवा बनाने जा रहे हैं जो दो संख्याओं को जोड़ती है।

<! DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>

</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<h3> Guru99 Global Event</h3>

<div ng-app = "mainApp" ng-controller = "DemoController">
    <p>Result: {{result}}</p>
</div>
<script>
    var mainApp = angular.module("mainApp", []);

    mainApp.service('AdditionService', function(){
        this.ADDITION = function(a,b) {
            return a+b;
        }
    });

    mainApp.controller('DemoController', function($scope, AdditionService) {

            $scope.result = AdditionService.ADDITION(5,6);
    });
</script>

</body>
</html>

उपरोक्त उदाहरण में, निम्नलिखित चरण अपनाए गए हैं

1.  mainApp.service('AdditionService', function()

   यहां हम अपने मुख्य AngularJS मॉड्यूल के सर्विस पैरामीटर का उपयोग करके 'AdditionService' नामक एक नई सेवा बना रहे हैं।

2.  this.ADDITION = function(a,b)

   यहां हम अपनी सर्विस के अंदर 'ADDITION' नाम का एक नया फंक्शन बना रहे हैं। इसका मतलब है कि जब AngularJS हमारे कंट्रोलर के अंदर AdditionService को इंस्टैंशिएट करेगा, तो हम 'ADDITION' फंक्शन को एक्सेस कर पाएंगे। इस फंक्शन की परिभाषा में, हम बता रहे हैं कि यह फंक्शन दो पैरामीटर, a और b स्वीकार करता है।

3.  return a+b;

   यहां हम अपने ADDITION फ़ंक्शन के मुख्य भाग को परिभाषित कर रहे हैं जो केवल पैरामीटर को जोड़ता है और जोड़ा गया मान लौटाता है।

4.  mainApp.controller('DemoController', function($scope, AdditionService)

   यह वह मुख्य चरण है जिसमें डिपेंडेंसी इंजेक्शन शामिल है। हमारे कंट्रोलर की परिभाषा में, अब हम अपनी 'AdditionService' सेवा का संदर्भ दे रहे हैं। जब AngularJS इसे देखेगा, तो यह 'AdditionService' प्रकार का एक ऑब्जेक्ट बनाएगा।

5.  $scope.result = AdditionService.ADDITION(5,6);

   अब हम अपनी सेवा में परिभाषित 'ADDITION' फ़ंक्शन तक पहुँच रहे हैं और इसे नियंत्रक के $scope ऑब्जेक्ट को असाइन कर रहे हैं।

तो यह एक सरल उदाहरण है कि हम अपनी सेवा को कैसे परिभाषित कर सकते हैं और उस सेवा की कार्यक्षमता को अपने नियंत्रक के अंदर कैसे डाल सकते हैं।

अक्सर पूछे जाने वाले प्रश्न