कैसे AngularJs में निर्भरता इंजेक्शन लागू करने के लिए



यह आर्टिल आपको एक विस्तृत और व्यापक ज्ञान प्रदान करेगा कि कैसे AngularJs में डिपेंडेंसी इंजेक्शन लागू किया जाए।

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





मूल्य निर्भरता इंजेक्शन

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

उदाहरण:



// एक मॉड्यूल परिभाषित करें

var firstModule = angular.module ('FirstModule', [])

// एक मान ऑब्जेक्ट बनाएं और इसे डेटा पास करें



firstModule.value ('नंबरवैल्यू', 50)

FirstModule.value ('stringValue', 'xyz')

FirstModule.value ('ऑब्जेक्टवैल्यू', {val1: 456, val2: 'xyz'})

इस उदाहरण में, मानों () फ़ंक्शन का उपयोग करके मानों को परिभाषित किया जाता है। मान का नाम पहले पैरामीटर द्वारा निर्दिष्ट किया गया है, और दूसरा पैरामीटर मान निर्दिष्ट करता है। यह कारखानों, सेवाओं और नियंत्रकों को अपने नाम से ही इन मूल्यों को संदर्भित करने में सक्षम बनाता है।

किसी मान का इंजेक्शन लगाना

हम मान के समान नाम के साथ एक पैरामीटर जोड़कर AngularJs नियंत्रक फ़ंक्शन में एक मान इंजेक्ट कर सकते हैं।

उदाहरण:

var firstModule = angular.module ('FirstModule', [])

firstModule.value ('नंबरवैल्यू', 18)

FirstModule.controller ('फ़र्स्टकंट्रोलर', फंक्शन ($ गुंजाइश, नंबरवैल्यू) {

कंसोल.लॉग (नंबरवैल्यू)

बिगडाटा और हडूप के बीच अंतर

})

फैक्टरी इंजेक्शन

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

यह मूल्य की गणना और वापस करने के लिए फ़ैक्टरी फ़ंक्शन का उपयोग करता है।

उदाहरण:

var firstModule = angular.module ('FirstModule', [])

FirstModule.factory ('FirstFactory', फ़ंक्शन () {

वापसी 'एक मूल्य'

})

FirstModule.controller ('फ़र्स्टकंट्रोलर', फंक्शन ($ गुंजाइश, फ़र्नीचर) {

कंसोल.लॉग (FirstFactory)

})

कारखाने में मूल्यों का इंजेक्शन लगाना

निम्नलिखित विधि द्वारा एक मान को कारखाने में इंजेक्ट किया जा सकता है:

var firstModule = angular.module ('FirstModule', [])

firstModule.value ('नंबरवैल्यू', 29)

FirstModule.controller ('फ़र्स्टकंट्रोलर', फंक्शन ($ गुंजाइश, नंबरवैल्यू) {

कंसोल.लॉग (नंबरवैल्यू)

})

यह ध्यान दिया जाना चाहिए कि मूल्यफैक्ट्री फंक्शन द्वारा उत्पादित इंजेक्शन है, न कि फैक्ट्री फंक्शन। आइए, AngularJs में डिपेंडेंसी इंजेक्शन के इस लेख के साथ आगे बढ़ते हैं।

AngularJs में सेवा इंजेक्शन

एक सिंगलटन जावास्क्रिप्ट ऑब्जेक्ट जिसमें फ़ंक्शन का एक सेट होता है, को एंगुलरज में एक सेवा के रूप में जाना जाता है। सेवा करने के लिए आवश्यक तर्क फ़ंक्शन में निहित है। मॉड्यूल पर सेवा () फ़ंक्शन का उपयोग करके सेवा बनाई जा सकती है।

उदाहरण:

// एक मॉड्यूल परिभाषित करें

var firstApp = angular.module ('firstApp', [])

...

// ऐसी सेवा बनाएँ जो एक विधि को परिभाषित करे एक संख्या के वर्ग को वापस करने के लिए वर्ग

firstApp.service ('CalciService', फ़ंक्शन (MathService) {

this.square = function (x) {

वापसी MathService.multiply (x, x)

}

})

// नियंत्रक में सेवा 'CalciService' इंजेक्षन

firstApp.controller ('CalciController', फ़ंक्शन ($ गुंजाइश, CalciService),

डिफ़ॉल्ट)

$ गुंजाइश.नंबर = डिफ़ॉल्टइन्पुट

$ स्कोप। रिजल्ट = कालसी सर्विस।क्वे ($ स्कोप.नंबर)

$ गुंजाइश। वर्ग = फ़ंक्शन () {

$ स्कोप। रिजल्ट = कालसी सर्विस।क्वे ($ स्कोप.नंबर)

}

})

प्रदाता

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

उदाहरण:

// एक मॉड्यूल परिभाषित करें

var firstApp = angular.module ('firstApp', [])

...

// प्रदाता का उपयोग करके एक सेवा बनाएँ जो वापस लौटने के लिए एक विधि वर्ग को परिभाषित करता है

एक संख्या का वर्ग।

firstApp.config (फ़ंक्शन ($ प्रदान))

$ प्रदान .provider ('MathService', फ़ंक्शन () {

यह। $ मिल = समारोह () {

var factory =

factory.multiply = function (x, y) {

बस समय संकलक जावा में

वापसी x * y

}

वापसी का कारखाना

}

})

})

लगातार

चूंकि उपयोगकर्ता मॉड्यूल.config () फ़ंक्शन में मानों को इंजेक्ट नहीं कर सकता है, हम स्थिरांक का उपयोग करते हैं। कॉन्‍फ़ि‍ंट का उपयोग कॉन्‍फ़िगर चरण में मानों को पास करने के लिए किया जाता है

FirstApp.constant ('configParam', 'निरंतर मूल्य')

उदाहरण:

ऊपर उल्लिखित निर्देशों का उपयोग निम्नलिखित तरीके से किया जा सकता है:

निर्भरता इंजेक्शन

एंगुलरजेएस स्क्वरिंग उदाहरण

कोई भी नंबर दर्ज करें:

एक्स

परिणाम: {{परिणाम}}

var firstApp = angular.module ('firstApp', [])

firstApp.config (फ़ंक्शन ($ प्रदान))

$ प्रदान .provider ('MathService', फ़ंक्शन () {

यह। $ मिल = समारोह () {

var factory =

factory.multiply = function (x, y) {

वापसी x * y

}

वापसी का कारखाना

}

})

})

firstApp.value ('defaultInput', 6)

firstApp.factory ('मैथ्स सर्विस', फंक्शन () {

var factory =

factory.multiply = function (x, y) {

वापसी x * y

}

वापसी का कारखाना

})

firstApp.service ('CalciService', फ़ंक्शन (MathService) {

this.square = function (x) {

वापसी MathService.multiply (x, x)

}

})

सी ++ सॉर्ट सरणी

FirstApp.controller ('CalciController', फ़ंक्शन ($ गुंजाइश, CalciService, defaultInput) {

$ गुंजाइश.नंबर = डिफ़ॉल्टइन्पुट

$ स्कोप। रिजल्ट = कालसी सर्विस।क्वे ($ स्कोप.नंबर)

$ गुंजाइश। वर्ग = फ़ंक्शन () {

$ स्कोप। रिजल्ट = कालसी सर्विस।क्वे ($ स्कोप.नंबर)

}

})

OUTPUT:

कोणीयज में निर्भरता इंजेक्शन

इसके साथ, हम AngularJs लेख में इस निर्भरता इंजेक्शन के अंत में आते हैं। सी बाहर निकालो 250,000 से अधिक संतुष्ट शिक्षार्थियों के एक नेटवर्क के साथ एक विश्वसनीय ऑनलाइन शिक्षण कंपनी, एडुरेका द्वारा, दुनिया भर में फैली हुई है।

क्या आप हमसे कोई प्रश्न पूछना चाहते हैं? कृपया इसे AngularJs में इस निर्भरता इंजेक्शन के टिप्पणी अनुभाग में उल्लेख करें और हम आपको वापस मिलेंगे।