AngularJS
निर्भरता अन्तःक्षेपण

वाक्य - विन्यास

• myApp.controller ('MyController', function ($ गुंजाइश) {...}); // गैर-minified कोड

• myApp.controller ('MyController', ['$ गुंजाइश', फ़ंक्शन ($ गुंजाइश) {...}]); // समर्थन न्यूनतमकरण

• फ़ंक्शन MyController () {}

  MyController। $ इंजेक्षन = ['$ गुंजाइश'];

  myApp.controller ('MyController', MyController); // $ इंजेक्शन एनोटेशन

• injector.get $ ( 'इंजेक्शन'); // डायनेमिक / रनटाइम इंजेक्शन

टिप्पणियों

इंजेक्शन

एक कोणीय अनुप्रयोग में एक इंजेक्शन का सबसे सरल उदाहरण - एक कोणीय Controller को $scope इंजेक्शन Controller :

angular.module('myModule', [])
.controller('myController', ['$scope', function($scope) {
    $scope.members = ['Alice', 'Bob'];
    ...
}])

उपरोक्त एक controller में $scope एक इंजेक्शन को दिखाता है, लेकिन यह वही है कि क्या आप किसी भी मॉड्यूल को किसी अन्य में इंजेक्ट करते हैं। प्रक्रिया वही है।

कोणीय प्रणाली आपके लिए निर्भरता को हल करने के प्रभारी है। यदि आप उदाहरण के लिए एक सेवा बनाते हैं, तो आप इसे ऊपर के उदाहरण में सूचीबद्ध कर सकते हैं और यह आपके लिए उपलब्ध होगा।

आप DI - निर्भरता इंजेक्शन का उपयोग कर सकते हैं - जहां भी आप एक घटक को परिभाषित कर रहे हैं।

ध्यान दें कि उपरोक्त उदाहरण में हम "इनलाइन एरियर एनोटेशन" का उपयोग करते हैं। मतलब, हम स्पष्ट रूप से अपने आश्रितों के नामों को लिखते हैं। हम ऐसा तब करते हैं, जब एप्लिकेशन को उत्पादन के लिए कोड को छोटा करने से रोकने के लिए किया जाता है। कोड मिनिफिकेशन चर के नाम (लेकिन तार नहीं) को बदलता है, जो इंजेक्शन को तोड़ता है। तार का उपयोग करके, कोणीय जानता है कि हमें कौन सी निर्भरताएं चाहिए।

बहुत महत्वपूर्ण - स्ट्रिंग नामों का क्रम फ़ंक्शन में पैरामीटर के समान होना चाहिए।

ऐसे उपकरण हैं जो इस प्रक्रिया को स्वचालित करते हैं और आपके लिए इसका ख्याल रखते हैं।

गतिशील इंजेक्शन

घटकों को गतिशील रूप से अनुरोध करने का एक विकल्प भी है। आप इसे $injector सेवा का उपयोग करके कर सकते हैं:

myModule.controller('myController', ['$injector', function($injector) {
    var myService = $injector.get('myService');
}]);

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

$ इंजेक्शन संपत्ति एनोटेशन

समान रूप से, हम $inject संपत्ति एनोटेशन का उपयोग ऊपर के समान प्राप्त करने के लिए कर सकते हैं:

var MyController = function($scope) {
  // ...
}
MyController.$inject = ['$scope'];
myModule.controller('MyController', MyController);

वेनिला जावास्क्रिप्ट में गतिशील रूप से लोड AngularJS सेवा

आप AngularJS injector() विधि का उपयोग करके वेनिला जावास्क्रिप्ट में AngularJS सेवाओं को लोड कर सकते हैं। प्रत्येक jqLite तत्व को पुनः प्राप्त करना angular.element() कहा angular.element() में एक विधि injector() होता है जिसका उपयोग इंजेक्टर को पुनः प्राप्त करने के लिए किया जा सकता है।

var service;
var serviceName = 'myService';

var ngAppElement = angular.element(document.querySelector('[ng-app],[data-ng-app]') || document);
var injector = ngAppElement.injector();

if(injector && injector.has(serviceNameToInject)) {
    service = injector.get(serviceNameToInject);
}

उपरोक्त उदाहरण में हम AngularJS एप्लिकेशन ( ngAppElement ) की जड़ वाले jqLite तत्व को पुनः प्राप्त करने का प्रयास करते हैं। ऐसा करने के लिए, हम angular.element() विधि का उपयोग करते हैं, एक DOM तत्व की खोज करते हैं जिसमें ng-app या data-ng-app विशेषता होती है या, यदि यह मौजूद नहीं है, तो हम वापस document तत्व में आते हैं। हम इंजेक्टर उदाहरण ( ngAppElement.injector() साथ ngAppElement.injector() पुनः प्राप्त करने के लिए ngAppElement का उपयोग करते हैं। इंजेक्टर उदाहरण का उपयोग यह जांचने के लिए किया जाता है कि क्या इंजेक्शन लगाने के लिए सेवा मौजूद है ( injector.has() ) और फिर service चर के अंदर service injector.get() साथ injector.get() लोड करने के लिए।