एक AngularJS निर्देश क्या है?

Question

मैंने AngularJS प्रलेखन और कई ट्यूटोरियल के माध्यम से पढ़ने में काफी समय बिताया है, और मैं इस बात से काफी आश्चर्यचकित हूं कि प्रलेखन कैसे अप्रतिष्ठित है।

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

एक AngularJS निर्देश क्या है?

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

मुख पृष्ठ पर :

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

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

निर्देश HTML नए गुर सिखाने का एक तरीका है। DOM संकलन के दौरान निर्देशों को HTML के विरुद्ध मिलान किया जाता है और निष्पादित किया जाता है। यह निर्देशों को व्यवहार को पंजीकृत करने या DOM को बदलने की अनुमति देता है।

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

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

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

Comments

आपने मुझे ... उदाहरण के रूप में jQuery की स्पष्ट परिभाषा दी।

— joshuamabina

यह सुनिश्चित नहीं है कि 2012 में स्टैक ओवरफ्लो पर यह कैसे था, लेकिन मैंने इस प्रश्न को संशोधित किया और "कोणीय-निर्देश" टैग जोड़ा। इसकी टैग जानकारी वास्तव में काफी स्पष्ट परिभाषा देती है। इसके अलावा, मैंने देखा कि मैं डेवलपर डॉक्स में दूसरी बोली नहीं ढूँढ सकता ...

— user4642212

Answer 1

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

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

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

इसे संबोधित करने के लिए क्या व्यावहारिक समस्याएं और स्थितियां हैं?

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

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

यह किस डिज़ाइन पैटर्न को अपनाता है, या वैकल्पिक रूप से, यह एंगुलर के MVC / MVW मिशन में कैसे फिट होता है

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

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

---

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

Comments

मार्क, धन्यवाद। मुझे लगता है कि यह स्पष्ट है और शायद सटीक उत्तर के लिए निकटतम है। मुझे लगता है कि निर्देश हमेशा html टैग के लिए बाध्य होते हैं? इसलिए शायद यह कहना अधिक सटीक होगा कि एक निर्देश एक फ़ंक्शन है जो एक HTML टैग के लिए बाध्य है। जैसे, यह HTML भाषा को घोषित रूप से विस्तारित करने की अनुमति देता है।

— टॉस्टर

खैर, एक निर्देश का उपयोग एक टिप्पणी में किया जा सकता है, इसलिए सभी निर्देशों को एक HTML टैग के लिए बाध्य नहीं होना चाहिए। जैसे,<!-- directive: my-directive exp -->

— मार्क राजकोक

मार्क, क्या यह एक निर्देश का अपरंपरागत उपयोग होगा? यानी निर्देशों का पारंपरिक रूप से उपयोग किया जाता है और HTML को विस्तारित करने के लिए उपयोग किया जाता है।

— 3

ठीक है मुझे अब बेहतर समझ है। एक तरह से इसके बारे में सोचो के लिए है: 1. डीएसएल आमतौर पर प्रतिनिधित्व है वाक्य रचना के पेड़ 2. एचटीएमएल डोम एक डीएसएल वाक्य रचना का पेड़ है, लेकिन यह एक कठोर एक है: टैग ज्यादातर सख्ती से बनाया गया है और यह मकसद रहे हैं, और एक्स्टेंसिबल नहीं। 3. विशेष रूप से AngularJS और निर्देश तंत्र, डेवलपर्स को कस्टम ट्री नोड्स बनाने की अनुमति देकर HTML DOM को अधिक लचीला बनाते हैं। ये नोड्स नए व्यवहारों या मौजूदा व्यवहारों (उप-पेड़ों) के एकत्रीकरण का प्रतिनिधित्व कर सकते हैं । इस प्रकार, निर्देश HTML डोम को कस्टम डीएसएल में विकसित करने की अनुमति देते हैं

— tohster

@MarkRajcok मैं आपके अंतिम पैराग्राफ के साथ संघर्ष कर रहा हूं। क्या सादा <div></div>एक निर्देश है? अपने हाँ कहा। लेकिन यहाँ कोई सजावट नहीं है (तत्व, वर्ग, टिप्पणी, विशेषता के माध्यम से)। लोग यहाँ कह रहे हैं कि ये HTML DOM के लिए पुनः मार्कर हैं । क्या आप स्पष्ट कर सकते हो ? (मैं उस कारण के बारे में बात नहीं कर रहा हूं, जहां आप एक सादे तत्व के लिए एक निर्देश बना सकते हैं जैसे <div>)

— रॉय नमिर

Answer 2

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

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

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

एनजी-ऐप निर्देश एक AngularJS आवेदन परिभाषित करता है।

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

एनजी-बाँध HTML दृश्य निर्देश बांध अनुप्रयोग डेटा।

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

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

Answer 3

प्रलेखन को देखते हुए, निर्देश संरचनाएं हैं जो आप लिख सकते हैं कि ऑब्जेक्ट्स और व्यवहार बनाने के लिए कोणीयज पार्स करते हैं। दूसरे शब्दों में यह एक टेम्पलेट है जिसमें आप किसी भी मनमाना नोड्स और छद्म जावास्क्रिप्ट का मिश्रण का उपयोग करते हैं और डेटा के लिए प्लेसहोल्डर्स कैसे इरादे व्यक्त करने के लिए आपका विजेट (घटक) संरचित है, यह कैसे व्यवहार करता है और यह डेटा के साथ कैसे फ़ीड है। Angularjs तो उन निर्देशों के खिलाफ काम कर रहे html / जावास्क्रिप्ट कोड में अनुवाद करने के लिए चलाता है ।

निर्देश हैं ताकि आप उचित शब्दार्थ का उपयोग करके अधिक जटिल घटकों (विगेट्स) का निर्माण कर सकें। निर्देश के कोणीय उदाहरणों पर एक नज़र डालें - वे टैब फलक को परिभाषित कर रहे हैं (जो नियमित HTML में निश्चित रूप से मान्य नहीं है)। यह संरचना बनाने के लिए div-s या spans की तरह उपयोग करने से अधिक सहज है, जिसे तब टैब फलक की तरह स्टाइल किया जाता है ।

Comments

मैंने कहा कि मुझे लगता है कि तकनीकी व्याख्या थोड़ी कम है।

— ra8686

धन्यवाद यह काफी मददगार है। तो शायद मैं इसे एक प्रकार का डायनामिक टेम्पलेट (OO प्रोग्रामिंग में एक वर्ग के समान) के रूप में सोच सकता हूं जो एक घटक को एनकैप्सुलेट करता है, गुणों और व्यवहारों द्वारा इसका वर्णन करता है, त्वरित होने में सक्षम है, और खुद को DOM को व्यक्त कर सकता है? और इसका कारण मौजूद है (बनाम जावास्क्रिप्ट ऑब्जेक्ट या HTML टेम्प्लेट) HTML टैग्स को अधिक गतिशील, ऑब्जेक्ट-जैसे व्यवहारों पर लेने की अनुमति देना है ताकि वे OO प्रकार की प्रोग्रामिंग में जोड़-तोड़ करना शुरू कर सकें?

— टॉरस्टर

हां और ना। मैं यह नहीं कहूंगा कि कारण निर्देश मौजूद हैं, उनका ओओ प्रोग्रामिंग में हेरफेर करने के लिए बहुत कुछ है। वास्तव में फ्रेमवर्क के लिए संपूर्ण कोणीयज दृष्टिकोण ओओ जावास्क्रिप्ट कोड लिखने के बजाय एचटीएमएल से संबंधित भारी और मनमाने ढंग से डोम नोड्स विशेषताओं से संबंधित महसूस करता है। मुझे लगता है कि angularjs हर दिन की समस्याओं को हल कर रहा है के सभी उदाहरणों को देखने से मुझे वह खिंचाव मिलता है। मैं कहूंगा कि निर्देशों के पीछे का मुख्य कारण व्यवहार और डेटा को एक शब्दार्थ संरचित घटक में एम्बेड करना है।

— WTK

Answer 4

AngularJS निर्देशों में HTML पुनः मार्कर एक विशेषता (प्रतिबंधित- A), तत्व नाम (प्रतिबंधित- E), टिप्पणी (प्रतिबंधित- M) या CSS वर्ग (प्रतिबंधित - C) जैसे HTML DOM तत्व के लिए हैं जो AngularJS के HTML बॉयलर को ($) बताते हैं संकलित) उस DOM तत्व को निर्दिष्ट व्यवहार करने के लिए या यहाँ तक कि DOM तत्व और उसके बच्चों को रूपांतरित करने के लिए। कुछ उदाहरण ng-bind, ng-hide / show आदि हैं।

Answer 5

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

हमने एक कस्टम tabs तत्व के साथ HTML की शब्दावली को बढ़ाया है । 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और कोणीय को उन एलिमेंट्स को रेंडर करने की सुविधा देते हैं।

Comments

शीघ्र जवाब देने के लिए ध्न्यवाद! तो एक निर्देश का उद्देश्य कस्टम टैग और विशेषताओं के निर्माण द्वारा HTML की शब्दावली का विस्तार करना है? यह काफी शक्तिशाली लगता है, हालांकि यह "एमवीडब्ल्यू" की तुलना में बहुत व्यापक समस्या की गुंजाइश को संबोधित करता है। BTW अन्य असहमत हो सकते हैं, लेकिन मुझे लगता है कि एक पृष्ठ के निचले भाग तक स्क्रॉल करना, और फिर हाइपरलिंक शब्द पर मँडरा करना, और फिर एक पॉप-अप टूलटिप पढ़ना जो एक बार 'निर्देश' शब्द का उल्लेख नहीं करता है, वास्तव में "एक" नहीं है बहुत स्पष्ट "एक निर्देश क्या है की परिभाषा। बहरहाल, वास्तव में तेजी से प्रतिक्रिया की सराहना करते हैं।

— टॉस्टर

हाँ! आप उनके द्वारा की गई इस फिडेल को जांच सकते हैं। HTML फलक में वास्तविक HTML अलग है।

— ra8686