अंगुलरजेस में एक घटक क्या है?

Question

मैं निर्देशों के बारे में कुछ पढ़ रहा था और सोच रहा था कि निर्देश और एक घटक के बीच भेद क्या था, जब मुझे पता चला कि अंगुलरजेस में बहुत सारे घटक हैं।

एक फ़ंक्शन घटक, प्रकार घटक, सेवा घटक, फ़िल्टर घटक, प्रदाता घटक इत्यादि है ... फिर इसे ऊपर करने के लिए मैंने पाया कि एक मॉड्यूल घटक एक घटक है जिसमें निर्देश, सेवाएं, फ़िल्टर, प्रदाता, टेम्पलेट्स, ग्लोबल एपीआई, और परीक्षण मैक्स। यह चीजों को और अधिक भ्रमित करने के लिए प्रेरित था। मुझे कोणीय दस्तावेज में "घटक" की परिभाषा नहीं मिली जो सूचीबद्ध घटकों के प्रकार के बीच भेद को समझाएगी।

तो अंगुलरजेस में "घटक" वास्तव में क्या है? क्या यह कोड के पुन: प्रयोज्य ब्लॉक के रूप में सरल है?

वैसे, मैं वर्तमान में कोणीय संस्करण 1.4.2 का उपयोग कर रहा हूं।

Answer 1

ओओपी जावा उन्मुख पृष्ठभूमि से आ रहा है, मैं मॉड्यूल सहित विभिन्न कोणीय घटकों के बीच अंतर करने की कोशिश कर रहा था। मुझे लगता है कि सबसे अच्छा जवाब मैं मॉड्यूल के बारे में पाया 13 Steps to Angularjs Modularization

था एक AngularJS संदर्भ में, मॉड्यूलर समारोह बजाय प्रकार के आधार पर संगठन है। तुलना करने के लिए, दिए गए सरणी समय = [60, 60, 24, 365] और धन = [1, 5, 10, 25, 50], दोनों एक ही प्रकार के हैं, लेकिन उनके फ़ंक्शंस पूरी तरह से अलग हैं।

इसका मतलब है कि आपके घटक (नियंत्रक, फ़िल्टर, निर्देश) अब कहीं भी रहने के बजाय मॉड्यूल में रहते हैं।

तो हाँ, घटक पुन: प्रयोज्य कोड के ब्लॉक हैं, लेकिन जावास्क्रिप्ट के संदर्भ में, मॉड्यूल पैटर्न Angularjs में कोड के इन ब्लॉक के लिए एक पुनरावर्ती संरचना है। जिस तरह से इन मॉड्यूल लागू किए जाते हैं, आपको घटक का प्रकार देता है, यानी, नियंत्रक कार्यान्वयन संरचना इसे किसी सेवा या प्रदाता से अलग कर देगी, अगर यह समझ में आता है। मुझे यह भी लगता है कि Angularjs दस्तावेजों को यह संबोधित किया जाना चाहिए था।

(function() { 
    // ... all vars and functions are in this scope only 
    // still maintains access to all globals 
}()); 

यहाँ Javascript Module Pattern in depth पर एक उत्कृष्ट लेख है:

यहाँ बुनियादी पैटर्न मैं AngularJS कोड में दोहराया देखते हैं।

Answer 2

कोणीय घटकों को संस्करण 1.5 में पेश किया गया था।

एक घटक निर्देश का सरलीकृत संस्करण है। यह डोम हेरफेर नहीं कर सकता (लिंक या संकलन विधियों नहीं) और "प्रतिस्थापन" भी चला गया है।

घटक "प्रतिबंधित: ई" हैं और वे किसी ऑब्जेक्ट (फ़ंक्शन नहीं) का उपयोग करके कॉन्फ़िगर किए गए हैं।

एक उदाहरण:

app.component('onOffToggle', { 
    bindings: { 
     value: '=', 
     disabled: '=' 
    }, 
    transclude: true, 
    template: '<form class="form-inline">\ 
         <span ng-transclude></span>\ 
         <switch class="small" ng-model="vm.value" ng-disabled="vm.disabled"/>\ 
        </form>', 
    controllerAs: 'vm', 
    controller: ['$scope', function($scope) { 
     var vm = this; 
     $scope.$watch("vm.disabled", function (val) { 
     if (!val) { 
      vm.value = undefined; 
     } 
     }) 
    }] 
    }); 

अतिरिक्त पठन: https://toddmotto.com/exploring-the-angular-1-5-component-method/