ng-app बनाम data-ng-app, क्या अंतर है?

230

मैं वर्तमान में इस स्टार्ट ट्यूटोरियल वीडियो को देख रहा हूंangular.js

कुछ पल (के बाद 12'40 "), विशेषताओं वक्ता राज्यों में ng-appऔर data-ng-app=""अधिक या कम बराबर के अंदर हैं <html>टैग, और इसलिए कर रहे हैं ng-model="my_data_bindingऔर data-ng-model="my_data_binding"। हालांकि वक्ता एचटीएमएल, भिन्न प्रमाणकों के द्वारा सत्यापित किया जाएगा कहते हैं पर निर्भर करते हुए विशेषता है उपयोग किया गया।

क्या आप ng-उपसर्ग के खिलाफ data-ng-उपसर्ग के दो तरीकों के बीच अंतर बता सकते हैं ?

html angularjs

— स्टीफन रोलैंड
स्रोत

2

के संभावित डुप्लिकेट क्या एनजी ऐप्लिकेशन के अंतर्गत और डेटा एनजी-ऐप के बीच का अंतर है?

— बॉब जार्विस -

403

अच्छा प्रश्न। अंतर सरल है - दोनों के बीच कोई अंतर नहीं है सिवाय इसके कि कुछ HTML5 सत्यापनकर्ता किसी संपत्ति पर एक त्रुटि फेंक देंगे ng-app, लेकिन वे किसी भी चीज के लिए एक त्रुटि नहीं फेंकते हैं data-, जैसे कि data-ng-app।

इसलिए अपने प्रश्न का उत्तर देने के लिए, data-ng-appयदि आप अपने HTML को थोड़ा आसान बनाना चाहते हैं , तो इसका उपयोग करें ।

मजेदार तथ्य: आप x-ng-appएक ही प्रभाव के लिए भी उपयोग कर सकते हैं ।

— कोड व्हिस्परर
स्रोत

4

क्या डेटा- उपसर्ग कभी एनजी विशेषता को ठीक से काम करने से रोक सकता है? (उदाहरण के लिए, "डेटा-एनजी-रिपीट")?

— tonejac

3

ऐसा लगता है कि सीपीयू चक्रों की ऐसी बर्बादी मैन्युअल रूप से बंद data-और x-। ng-सामान स्वीकार करने के लिए HTML सत्यापन नियम क्यों नहीं बदले जा सकते ?

— डेवएल्गर

8

@DaveAlger: data-*विशेषताएँ HTML का विस्तार करने का तरीका हैं ।

— संपतस्रीस

1

@DaveAlger: जैसा आपने कहा, वैसा करना एक बुरा विचार है। अगर वहाँ अलग-अलग उपसर्ग के साथ कोणीय के रूप में बहुत सारे प्रसिद्ध उपकरण हैं, तो आप चाहते हैं कि एचटीएमएल उनके उपसर्ग को जोड़ने के लिए उन सभी का पालन करें?!?! जैसा कि क्रुमिया ने कहा कि यह HTML का विस्तार करने का तरीका है।

— दस्सी ओरलींडो

65

से AngularJS प्रलेखन

कोणीय एक तत्व के टैग और विशेषता के नाम को निर्धारित करता है कि कौन से तत्व किस दिशा से मेल खाते हैं। हम आम तौर पर उनके केस-सेंसिटिव कैमलकेस सामान्यीकृत नाम (जैसे ngModel) द्वारा निर्देशों का उल्लेख करते हैं। हालाँकि, HTML केस-असंवेदनशील होने के कारण, हम DOM में निर्देशों का संदर्भ निम्न-केस रूपों द्वारा देते हैं, जो आमतौर पर DOM तत्वों (जैसे एनजी-मॉडल) पर डैश-सीमांकित विशेषताओं का उपयोग करते हैं।

सामान्यीकरण प्रक्रिया इस प्रकार है:

पट्टी x- और डेटा- तत्व / विशेषताओं के सामने से। :, -, या _- सीमांकित नाम को कैमसेल में परिवर्तित करें। यहां उन तत्वों के कुछ समान उदाहरण दिए गए हैं जो ngBind से मेल खाते हैं:

नीचे दिए गए कथन के आधार पर सभी वैध निर्देश हैं

1. एनजी-बाइंड
2. एनजी: बाइंड
3. एनजीबीइंड
4. डेटा-एनजी-बाइंड
5. एक्स-एनजी-बाइंड

— Srinu
स्रोत

लेकिन यह केवल निर्देश नाम के साथ तुलना करने के लिए ऐसा करता है। यह वास्तविक विशेषता को नहीं बदलता है।

— रेट्रोक्रोड

3

के बारे में पता करने के लिए अच्छा है ,: और _ संकेतन

— कोड व्हिस्परर

29

मतभेद इस तथ्य में निहित हैं कि HTML5 विनिर्देशdata-* में कस्टम विशेषताएँ मान्य हैं । इसलिए यदि आपको अपने मार्कअप को मान्य करने की आवश्यकता है, तो आपको उन्हें विशेषताओं के बजाय उपयोग करना चाहिए ।ng

— मनु पत्र
स्रोत

1

मैं उस विनिर्देशन से समझता हूं कि डेटा- * काम करेगा क्योंकि यह सिर्फ html को मान्य करता है। लेकिन फिर x- * काम क्यों करेगा? विनिर्देश में इसके बारे में उनका कोई वर्णन नहीं है।

— भ्रामर

1

x- * ब्राउज़र द्वारा उपयोग के लिए आरक्षित है। WHY x के आपके प्रश्न के अनुसार, या तो कोणीय के रूप में काम करेगा, विशेष रूप से यह सुनिश्चित करता है कि यह डेटा / x के लिए काम करता है या नहीं इसे अपनी रूपरेखा में कोड करके। अगर आप कोणीय के लिए काम क्यों नहीं कर रहे हैं, तो अच्छी तरह से एक और बहस है। दोनों के लिए अच्छे तर्क हैं। इस उत्तर को SO: stackoverflow.com/a/17902387/339803 पर देखें । उस पृष्ठ का अन्य उत्तर लगता है कि X XHTML के लिए है, लेकिन मुझे यकीन नहीं है। देखें कि आप इसे पढ़ने के बाद क्या बना सकते हैं। HTML5 युक्ति ब्राउज़र / विक्रेता का उपयोग भी कहता है: w3.org/html/wg/drafts/html/master/single-page.html

— redfox05

15

संक्षिप्त जवाब:

ng-modelऔर data-ng-modelसमान और समकक्ष हैं!

क्यों?

इसके लिए कारण: data- उपसर्ग
HTML5 विनिर्देश किसी भी कस्टम विशेषता द्वारा उपसर्ग करने की अपेक्षा करता है data-।
: के लिए कारण दोनों ng-modelऔर data-ng-modelकर रहे हैं एक ही और बराबर।

AngularJS Document - सामान्यीकरण

Angular किसी तत्व के टैग और विशेषता नाम को यह निर्धारित करने के लिए सामान्य करता है कि कौन से तत्व किस निर्देश से मेल खाते हैं। हम आमतौर पर उनके केस-सेंसिटिव कैमेलकेस सामान्यीकृत नाम (जैसे ngModel) द्वारा निर्देशों का उल्लेख करते हैं । हालाँकि, HTML केस-असंवेदनशील होने के कारण, हम DOM में निर्देशों का संदर्भ निम्न-केस रूपों द्वारा लेते हैं, आमतौर पर DOM तत्वों (जैसे ) पर डैश-सीमांकित विशेषताओं का उपयोग करते हैं ng-model।

सामान्यीकरण प्रक्रिया निम्नानुसार है:
1. पट्टी x-और data-तत्व / विशेषताओं के सामने से।
2. कन्वर्ट :, -या _करने के लिए -delimited नाम camelCase।

उदाहरण के लिए
निम्नलिखित प्रपत्र सभी समतुल्य हैं और ngBind निर्देश से मेल खाते हैं:

<div ng-controller="Controller">
  Hello <input ng-model='name'> <hr/>
  <span ng-bind="name"></span> <br/>
  <span ng:bind="name"></span> <br/>
  <span ng_bind="name"></span> <br/>
  <span data-ng-bind="name"></span> <br/>
  <span x-ng-bind="name"></span> <br/>
</div>

— एडी
स्रोत

2

यदि आप अपना पृष्ठ HTML वैध बनाना चाहते हैं, तो आप ng- के बजाय, डेटा- ng- का उपयोग कर सकते हैं।

— NNaseet
स्रोत

2

ओपी समझता है कि उनका उपयोग परस्पर रूप से किया जा सकता है, लेकिन यह जानने की इच्छा है कि यदि वे "समान" काम करते हैं तो दोनों क्यों उपलब्ध हैं। मेरा मानना है कि उन्हें अलग बनाने वाला स्पष्टीकरण अधिक मूल्यवान उत्तर होगा।

— चार्ल्स वाटसन

1

यदि आप ब्राउज़र पर सेवा करने से पहले अपने सर्वर पर html या html-टुकड़े को हेरफेर करना चाहते हैं, तो आप निश्चित रूप से सिर्फ एनजी-एक्सएक्सएक्स विशेषताओं के बजाय डेटा-एनजी-एक्सएक्सएक्स विशेषताओं का उपयोग करना चाहते हैं।

यह आपके HTML को वैध बनाता है, जिसका अर्थ है कि इसका उपयोग html (सर्वर आधारित) पार्सर्स जैसे डोमडिकुलमेंट (php) या अन्य द्वारा किया जा सकता है। ये पार्सर अक्सर html नहीं बनने पर विफल हो जाते हैं।
कोणीय विशेषता को सामान्य करता है, लेकिन याद रखें, यह क्लाइंट पर है, सर्वर पर नहीं।

— कीस हेसल
स्रोत