javascript - एंगुलरजेएस निर्देश क्या है?




angularjs angular-directive (4)

मैंने AngularJS दस्तावेज़ और कई ट्यूटोरियल्स के माध्यम से काफी समय बिताया है, और मुझे आश्चर्य है कि दस्तावेज़ीकरण कितना अप्राप्य है।

मेरे पास एक सरल, उत्तरदायी प्रश्न है जो AngularJS लेने के लिए दूसरों के लिए भी उपयोगी हो सकता है:

एंगुलरजेएस निर्देश क्या है?

कहीं निर्देश के बारे में एक सरल, सटीक परिभाषा होनी चाहिए, लेकिन AngularJS वेबसाइट इन आश्चर्यजनक बेकार परिभाषाओं को प्रदान करती है:

होम पेज पर :

निर्देश AngularJS में उपलब्ध एक अद्वितीय और शक्तिशाली विशेषता है। निर्देश आपको अपने एचटीएमएल सिंटैक्स का आविष्कार करने देते हैं, जो आपके आवेदन के लिए विशिष्ट है।

डेवलपर दस्तावेज में :

निर्देश एचटीएमएल नई चाल सिखाने का एक तरीका है। डीओएम संकलन निर्देशों के दौरान एचटीएमएल के खिलाफ मिलान किया जाता है और निष्पादित किया जाता है। यह निर्देशों को पंजीकरण करने, या डीओएम को बदलने के निर्देशों की अनुमति देता है।

और निर्देशों के बारे में वार्ता की एक श्रृंखला है , जो विडंबना यह है कि दर्शकों को लगता है कि वे पहले से ही समझते हैं कि वे क्या हैं।

क्या कोई स्पष्ट संदर्भ के लिए, प्रस्ताव के बारे में एक सटीक परिभाषा प्रदान करने में सक्षम होगा, जो बताता है:

  1. यह क्या है (उदाहरण के रूप में jQuery की स्पष्ट परिभाषा देखें)
  2. संबोधित करने के लिए क्या व्यावहारिक समस्याएं और स्थितियां हैं
  3. यह किस डिजाइन पैटर्न का प्रतीक है, या वैकल्पिक रूप से, यह AngularJS के purported एमवीसी / MVW मिशन में कैसे फिट बैठता है।

यह क्या है (उदाहरण के रूप में jQuery की स्पष्ट परिभाषा देखें)?

एक निर्देश अनिवार्य रूप से एक समारोह है जो निष्पादित करता है जब कोणीय संकलक इसे डीओएम में पाता है। कार्य लगभग कुछ भी कर सकता है, यही कारण है कि मुझे लगता है कि यह निर्धारित करना मुश्किल है कि निर्देश क्या है। प्रत्येक निर्देश का नाम होता है (जैसे एनजी-दोहराना, टैब, मेक-अप-अप-स्वयं) और प्रत्येक निर्देश यह निर्धारित करता है कि इसका उपयोग कहां किया जा सकता है: तत्व, विशेषता, कक्षा, एक टिप्पणी में।

एक निर्देश में आमतौर पर केवल एक (पोस्ट) लिंक फ़ंक्शन होता है। एक जटिल निर्देश में एक संकलन कार्य, एक पूर्व-लिंक फ़ंक्शन, और एक पोस्ट-लिंक फ़ंक्शन हो सकता है।

इसका क्या उद्देश्य व्यावहारिक समस्याएं और परिस्थितियों का समाधान करना है?

सबसे शक्तिशाली चीज निर्देश एचटीएमएल का विस्तार कर सकते हैं। आपके एक्सटेंशन के निर्माण के लिए आपके एक्सटेंशन एक डोमेन विशिष्ट भाषा (डीएसएल) हैं। उदाहरण के लिए, यदि आपका एप्लिकेशन ऑनलाइन शॉपिंग साइट चलाता है, तो आप "शॉपिंग कार्ट", "कूपन", "स्पेशल", आदि निर्देशों के लिए HTML का विस्तार कर सकते हैं - जो भी शब्द या वस्तुएं या अवधारणाएं " ऑनलाइन खरीदारी "डोमेन," div "और" span "के बजाय (जैसा कि @WTK पहले से ही उल्लेख किया गया है)।

निर्देश एचटीएमएल - समूह को कुछ पुन: प्रयोज्य घटक में एचटीएमएल का एक गुच्छा भी बना सकते हैं। यदि आप स्वयं को HTML में खींचने के लिए ng-include का उपयोग करते हैं, तो संभवतया निर्देशों में प्रतिक्रिया करने का समय हो सकता है।

यह किस डिजाइन पैटर्न को जोड़ता है, या वैकल्पिक रूप से, यह कोणीय के purported एमवीसी / एमवीडब्ल्यू मिशन में कैसे फिट करता है

निर्देश हैं जहां आप डीओएम में हेरफेर करते हैं और डोम घटनाओं को पकड़ते हैं। यही कारण है कि निर्देश का संकलन और लिंक दोनों कार्य "तत्व" को तर्क के रूप में प्राप्त करते हैं। आप ऐसा कर सकते हैं

  • निर्देश को बदलने के लिए एचटीएमएल (यानी, एक टेम्पलेट) का एक गुच्छा परिभाषित करें
  • इस तत्व (या उसके बच्चों) को घटनाओं को बांधें
  • कक्षा को जोड़ें / हटाएं
  • टेक्स्ट () मान बदलें
  • एक ही तत्व में परिभाषित विशेषताओं में परिवर्तनों के लिए देखें (वास्तव में यह गुणों के मूल्यों को देखा जाता है - ये दायरे गुण हैं, इसलिए निर्देश परिवर्तन के लिए "मॉडल" देखता है)
  • आदि।

एचटीएमएल में हमारे पास <a href="..."> , <img src="..."> , <br> , <table><tr><th> जैसी चीजें हैं। आप कैसे वर्णन करेंगे, href, img, src, br, table, tr, और वें क्या हैं? यही एक निर्देश है।


AngularJS निर्देशों में एचटीएमएल डीओएम तत्व के लिए एचटीएमएल पुनः मार्कर हैं जो एक विशेषता (प्रतिबंधित- ए), तत्व का नाम (प्रतिबंधित- ई), टिप्पणी (प्रतिबंधित- एम) या सीएसएस वर्ग (प्रतिबंधित - सी) है जो AngularJS के HTML कंपाइलर को बताता है ($ संकलित करें) उस डीओएम तत्व को निर्दिष्ट व्यवहार करने के लिए या यहां तक ​​कि डीओएम तत्व और उसके बच्चों को भी परिवर्तित करें। कुछ उदाहरण एनजी-बाइंड, एनजी-छुपा / शो इत्यादि हैं।


मुखपृष्ठ इस बारे में बहुत स्पष्ट है: जब आप पिछले अनुभाग में टैब पर होवर करते हैं:

हमने एक कस्टम tabs तत्व के साथ एचटीएमएल की शब्दावली बढ़ा दी है। tabs जटिल HTML संरचना और टैब को प्रतिपादित करने के लिए आवश्यक व्यवहार को सारणीबद्ध करते हैं। परिणाम एक और अधिक पठनीय दृश्य और बहुत आसानी से पुन: प्रयोज्य वाक्यविन्यास है। "

फिर अगले टैब में:

angular.module('components', []).
  directive('tabs', function() {
    return {
      restrict: 'E',
      transclude: true,
      scope: {},
      controller: function($scope, $element) {
        var panes = $scope.panes = [];

        $scope.select = function(pane) {
          angular.forEach(panes, function(pane) {
            pane.selected = false;
          });
          pane.selected = true;
        }

तो आप HTML तत्वों यानी tabs आविष्कार कर सकते tabs और कोणीय को उन तत्वों के प्रतिपादन को संभाल सकते हैं।


शायद कोणीय निर्देशों के लिए वास्तव में सरल और प्रारंभिक परिभाषा होगी

AngularJS निर्देश (एनजी-निर्देश) एचटीएमएल विशेषताओं को एनजी उपसर्ग (एनजी-मॉडल, एनजी-एप, एनजी-दोहराना, एनजी-बाइंड) के साथ हैं जो कोणीय द्वारा HTML को विस्तारित करने के लिए उपयोग किया जाता है। ( से: डब्ल्यू 3 स्कूल्स कोणीय ट्यूटोरियल )

इसके कुछ उदाहरण होंगे

एनजी-एप निर्देश एक कोणीयजेएस अनुप्रयोग को परिभाषित करता है।

एनजी मॉडल निर्देश एचटीएमएल नियंत्रण (इनपुट, चयन, textarea) के मूल्य डेटा के मूल्य को बांधता है।

एनजी-बाइंड निर्देश एचटीएमएल व्यू में एप्लिकेशन डेटा को बांधता है।

<div ng-app="">
    <p>Name: <input type="text" ng-model="name"></p>
    <p ng-bind="name"></p>
</div>

इस ट्यूटोरियल की जांच करें, कम से कम मेरे लिए यह कोणीय के लिए सबसे अच्छा परिचय था। @ मार्क-राजकोक ने पहले कहा था कि एक और पूरा दृष्टिकोण होगा।





angular-directive