AngularJS निर्भरता इंजेक्शन: कौन से घटक इंजेक्ट किए गए

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1) मूल्य घटक

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

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

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

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

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

<! 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>

उपरोक्त कोड उदाहरण में, नीचे दिए गए मुख्य चरण किए जा रहे हैं

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

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

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

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

```
 $scope.ID =TutorialID;
```

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

```
{{ID}}
```

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

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

2) सेवा

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

उदाहरण के लिए, “$http” Angular.JS में एक सेवा है जो आपके नियंत्रकों में इंजेक्ट किए जाने पर आवश्यक फ़ंक्शन प्रदान करती है

( 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>

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

 mainApp.service('AdditionService', function()

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

```
 this.Addition = function(a,b)
```

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

```
 return a+b;
```

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

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

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

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

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

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

सारांश

निर्भरता इंजेक्शन, जैसा कि नाम से पता चलता है, रन टाइम पर मॉड्यूल में आश्रित कार्यक्षमता को इंजेक्ट करने की प्रक्रिया है।
निर्भरता इंजेक्शन का उपयोग करने से अधिक पुनः-उपयोग योग्य कोड प्राप्त करने में मदद मिलती है। यदि आपके पास सामान्य कार्यक्षमता है जिसका उपयोग कई एप्लिकेशन मॉड्यूल में किया जाता है, तो सबसे अच्छा तरीका उस कार्यक्षमता के साथ एक केंद्रीय सेवा को परिभाषित करना और फिर उस सेवा को अपने एप्लिकेशन मॉड्यूल में निर्भरता के रूप में इंजेक्ट करना है।
AngularJS के value ऑब्जेक्ट का उपयोग सरल इंजेक्ट करने के लिए किया जा सकता है Java$inject का उपयोग करके अपने कंट्रोलर में स्क्रिप्ट ऑब्जेक्ट्स AngularJS.
सेवा मॉड्यूल का उपयोग आपकी कस्टम सेवाओं को परिभाषित करने के लिए किया जा सकता है, जिन्हें कई AngularJS मॉड्यूल में पुनः उपयोग किया जा सकता है।

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

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

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

1) मूल्य घटक

संबंधित आलेख

2) सेवा

सारांश

न्यूज़लैटर के लिए साइन अप करें