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

Question

यह नया लग सकता है, लेकिन मैं angularjs घटक के लिए इस tutorial का पालन कर रहा हूं।

मैं घटकों के लिए नया हूं और मैं इस तरह के घटक के लिए निरंतर Utils या authService कैसे इंजेक्ट कर सकता हूं?

app.component('tlOverallHeader', { 
    bindings: { 
     data: '=' 
    }, 
    templateUrl: 'js/indexTimeline/components/tl_overallHeader/templates/tl_overallHeader.html', 
    controller: function() { 
     this.ms = 'tlOverallheader!' 
    } 
}) 

धन्यवाद!

Answer 1

तुम सिर्फ एक स्टैंडअलोन नियंत्रक की तरह अपने घटक के नियंत्रक में सेवाएं इंजेक्षन में सक्षम होना चाहिए:

controller: function(Utils, authService) { 
    this.ms = 'tlOverallheader!' 

    authService.doAuthRelatedActivities().then(...); 
} 

Answer 2

आप इस तरह घटक नियंत्रक के लिए सेवाएं इंजेक्षन कर सकते हैं:

angular.module('app.module') 
     .component('test', { 
      templateUrl: 'views/someview.html', 
      bindings: { 
       subject: '=' 
      }, 
      controller: ['$scope', 'AppConfig', TestController] 
     }); 

    function TestController(scope, config) { 
     scope.something = 'abc'; 
    } 

या इस तरह:

angular.module('app.module') 
     .component('test', { 
      templateUrl: 'views/someview.html', 
      bindings: { 
       subject: '=' 
      }, 
      controller: TestController 
     }); 

    TestController.$inject = ['$scope', 'AppConfig'] 
    function TestController(scope, config) { 
     scope.something = 'abc'; 
    } 

Answer 3

स्वीकृत उत्तर minification सुरक्षित नहीं है। आप minification सुरक्षित निर्भरता इंजेक्शन अंकन यहाँ भी उपयोग कर सकते हैं:

angular.module('myApp') 

.component('myComponent', { 
    templateUrl: 'myTemplate.html', 
    controller: ['myFactory', function(myFactory){ 
     var thisComponent = this; 
     thisComponent.myTemplatemsg = myFactory.myFunc(); 
    }] 
}) 


.factory('myFactory', [ function(){ 

    return { 
     myFunc: function(){ 
        return "This message is from the factory"; 
       } 
    }; 
}]);  

एक शब्द:

controller: ['Utils', 'authService', 
    function(Utils, authService) { 
    this.ms = 'tlOverallheader!' 

    authService.doAuthRelatedActivities().then(...); 
    }, 
] 

Answer 4

कार्यात्मक शैली प्रोग्रामिंग जो फैक्टरी शैली सेवाओं निम्न सिंटैक्स का इस्तेमाल करता है के लिए काम किया हो जाता है सावधानी: आपके घटक के लिए आपके द्वारा सेट की गई वही घटक सेवा/कारखाना भी आपके ऐप में माता-पिता के दायरे और अन्य घटक क्षेत्रों सहित इंजेक्शन (और इस प्रकार सुलभ) है। यह शक्तिशाली है लेकिन आसानी से दुर्व्यवहार किया जा सकता है। इसलिए, यह अनुशंसित घटक केवल डेटा को अपने दायरे में संशोधित करते हैं, इसलिए इसमें कोई भ्रम नहीं है कि कौन संशोधित कर रहा है। इस पर अधिक जानकारी के लिए https://docs.angularjs.org/guide/component#component-based-application-architecture देखें।
हालांकि, उपरोक्त लिंक में भी चर्चा केवल बाइंडिंग ऑब्जेक्ट का उपयोग करते समय '=' के दो-तरफा-बाध्यकारी संपत्ति मान के सावधानीपूर्वक उपयोग को संबोधित करती है। इसलिए घटक सेवाओं और कारखानों के लिए एक ही तर्क लागू होना चाहिए। यदि आप अन्य घटक क्षेत्रों और/या अभिभावक के दायरे में एक ही सेवा या कारखाने का उपयोग करने की योजना बनाते हैं, तो मैं आपकी सेवा/कारखाने की स्थापना करने की सलाह देता हूं जहां आपका अभिभावक का दायरा रहता है या जहां आपकी इच्छित मण्डली सेवाओं/कारखानों का निवास होता है। विशेष रूप से यदि आपके पास एक ही सेवा/कारखाने का उपयोग करके कई घटक हैं। आप नहीं चाहते हैं कि यह कुछ मनमाना घटक मॉड्यूल में स्थित है जिसमें से खोजना मुश्किल होगा।