AngularJS: एनजी-बाइंड कोणीय में {{}} से बेहतर क्यों है?

Question

मैं कोणीय प्रस्तुति में से एक में था और उल्लेखित बैठक में से एक व्यक्ति बंधन ng-bindसे बेहतर है {{}}।

एक कारण, ng-bindघड़ी की सूची में चर डाल दिया और केवल जब कोई मॉडल परिवर्तन होता है तो डेटा देखने के लिए धकेल दिया जाता है, दूसरी ओर, {{}}हर बार अभिव्यक्ति को प्रक्षेपित करेगा (मुझे लगता है कि यह कोणीय चक्र है) और धक्का मूल्य, भले ही मूल्य बदल गया हो या नहीं।

यह भी कहा जाता है कि, यदि आपके पास स्क्रीन पर अधिक डेटा नहीं है, तो आप उपयोग कर सकते हैं {{}}और प्रदर्शन समस्या दिखाई नहीं देगी। क्या कोई मेरे लिए इस मुद्दे पर कुछ प्रकाश डाल सकता है?

Comments

"इसके ngBindबजाय इसका उपयोग करना बेहतर होता है {{ expression }}यदि कोई टेम्प्लेट अपने कच्चे राज्य में ब्राउज़र द्वारा क्षण भर में प्रदर्शित करता है इससे पहले कि कोणीय संकलन करता है। चूंकि ngBindएक तत्व विशेषता है, यह पेज को लोड करते समय उपयोगकर्ता के लिए बाइंडिंग को अदृश्य बनाता है।" - लेकिन प्रदर्शन के बारे में कुछ भी उल्लेख नहीं किया गया है।

— ब्लेज़ेमॉन्गर

क्या आप जांच कर सकते हैं, यदि मेरा उत्तर बेहतर है

— कॉन्स्टेंटिन क्रैस

{{}} मेरी राय में व्यावहारिक नहीं है, डेटा पूरी तरह से लोड होने से पहले दर्शक आपका टैग देखेगा। मुझे आश्चर्य है कि अगर कोणीय टीम कभी इस मुद्दे को ठीक करने जा रही है।

— जेरी लियांग

@Blazemonger: क्या आप केवल एनजी-क्लोक विशेषता को शामिल नहीं कर सकते हैं ताकि टेम्प्लेट को क्षण भर में प्रदर्शित होने से रोका जा सके?

— सुपरनैसी

Answer 1

यदि आप उपयोग नहीं कर रहे हैं ng-bind, इसके बजाय कुछ इस तरह है:

<div>
  Hello, {{user.name}}
</div>

आप Hello, {{user.name}}एक दूसरे user.nameको हल करने से पहले वास्तविक देख सकते हैं (डेटा लोड होने से पहले)

आप ऐसा कुछ कर सकते हैं

<div>
  Hello, <span ng-bind="user.name"></span>
</div>

अगर यह आपके लिए एक मुद्दा है।

एक और उपाय उपयोग करना है ng-cloak।

Comments

आप जो कह रहे हैं उसके आधार पर, {{}} का उपयोग करने पर कोई प्रदर्शन प्रभावित नहीं होता है? मुझे बताया गया था, यदि आप {{}} का उपयोग करते हैं, तो हर बार, यह निष्क्रिय हो जाएगा और मॉडल न बदलने पर भी परिणाम उत्पन्न करेगा।

— नायर

और अगर मैं टाइम टैग के अंदर user.name लपेटना नहीं चाहता, तो एनजी-बिंद का उपयोग कैसे करूं? अगर मैं कर्ली ब्रैकेट्स का उपयोग करता हूँ तो मुझे बिना html टैग्स के साफ नाम मिल जाएगा

— विक्टर

@KevinMeredith ऐसा प्रतीत होता है कि जब HTML लोड हो गया है, लेकिन कोणीय (अभी तक) नहीं है। याद रखें कि यह क्लाइंट-साइड टेम्पलेटिंग है जिसके बारे में हम बात कर रहे हैं। एप लोड करने वाले ब्राउजर में सभी इंटरपोल का काम करना होता है। आमतौर पर कोणीय भार काफी तेज होता है, क्योंकि यह ध्यान देने योग्य नहीं होता है, लेकिन कुछ मामलों में यह एक समस्या बन जाता है। तो, ng-cloakइस समस्या को हल करने के लिए आविष्कार किया गया था।

— होलोग्राफिक-सिद्धांत

मेरे लिए, यह सवाल का जवाब नहीं है, क्यों ngBind बेहतर है। यह {{}} एनोटेशन और ngCloak के संदर्भ के बजाय ngBind का उपयोग करने का तरीका है।

— कॉन्स्टेंटिन क्रैस

@ विक्टर वहाँ भी है ng-bind-templateजहाँ आप दोनों दृष्टिकोणों को जोड़ सकते हैं: ng-bind-template="Hello, {{user.name}}"यहाँ बंधन अभी भी प्रदर्शन को बढ़ावा देता है और आगे किसी भी घोंसले का शिकार नहीं करता है

— 9

Answer 2

दृश्यता:

जब आपका कोणीयज बूटस्ट्रैपिंग कर रहा है, तो उपयोगकर्ता को HTML में आपके रखे हुए कोष्ठक दिखाई दे सकते हैं। इससे निबटा जा सकता है ng-cloak। लेकिन मेरे लिए यह वर्कअराउंड है, कि मुझे उपयोग करने की आवश्यकता नहीं है, अगर मैं उपयोग करता हूंng-bind ।

---

प्रदर्शन:

{{}}है बहुत धीमी ।

यह ng-bindएक निर्देश है और पारित चर पर एक द्रष्टा को रखेगा। तो ng-bindकेवल तभी लागू होगा, जब पारित मूल्य वास्तव में बदल जाता है ।

दूसरी ओर कोष्ठकों को हर हाल में गंदा चेक किया जाएगा और ताज़ा किया जाएगा , भले ही यह आवश्यक न हो । $digest

---

मैं वर्तमान में एक बड़ा सिंगल पेज ऐप (~ 500 बाइंडिंग प्रति दृश्य) बना रहा हूं। {{}} से सख्त में बदलने से ng-bindहमें हर में लगभग 20% की बचत हुई scope.$digest।

---

सुझाव :

यदि आप कोणीय-अनुवाद जैसे अनुवाद मॉड्यूल का उपयोग करते हैं, तो हमेशा कोष्ठक एनोटेशन से पहले निर्देशों को प्राथमिकता दें ।

{{'WELCOME'|translate}} => <span ng-translate="WELCOME"></span>

यदि आपको एक फ़िल्टर फ़ंक्शन की आवश्यकता है, तो बेहतर निर्देश के लिए जाएं, जो वास्तव में आपके कस्टम फ़िल्टर का उपयोग करता है। $ फ़िल्टर सेवा के लिए प्रलेखन

---

अद्यतन 28.11.2014 (लेकिन शायद विषय से दूर):

कोणीय 1.3x में bindonceकार्यक्षमता पेश की गई थी। इसलिए आप एक बार एक अभिव्यक्ति / विशेषता के मूल्य को बांध सकते हैं (जब बाध्य हो जाएगा! = 'अपरिभाषित')।

यह उपयोगी है जब आप अपने बंधन को बदलने की उम्मीद नहीं करते हैं।

उपयोग: ::अपने बंधन से पहले रखें :

<ul>  
  <li ng-repeat="item in ::items">{{item}}</li>
</ul>  
<a-directive name="::item">
<span data-ng-bind="::value"></span>

उदाहरण:

ng-repeatप्रति पंक्ति कई बाइंडिंग के साथ तालिका में कुछ डेटा का उत्पादन करने के लिए। अनुवाद-बाइंडिंग, फ़िल्टर आउटपुट, जो हर दायरे में पचते हैं।

Comments

यह एक बेहतर उत्तर है

— निमशिम्प्सकी

स्रोत (2014-11-24 के अनुसार) से जो मैं बता सकता हूं, उससे घुंघराले प्रक्षेप को एक निर्देश की तरह संभाला जा सकता है (एनजी / संकलित .js में AddTextInterpolateDirective () देखें)। यह $ वॉच का भी उपयोग करता है इसलिए यदि पाठ को परिवर्तित नहीं किया जाता है तो DOM को छुआ नहीं जाता है, यह दावा करने पर हर $ पचने पर इसे "गंदा चेक और ताज़ा" नहीं करता है। हालांकि हर $ पचा पर क्या किया जाता है, यह है कि प्रक्षेपित परिणाम स्ट्रिंग की गणना की जाती है। यह केवल पाठ नोड को नहीं सौंपा गया है जब तक कि यह बदल न जाए।

— मैटी विर्ककुनेन

मैंने आंतरिक मूल्यांकन के लिए एक प्रदर्शन परीक्षण लिखा। एनजी रिपीट में इसकी 2000 प्रविष्टियां थीं और ऑब्जेक्ट में 2 विशेषताएँ प्रदर्शित की गईं, इसलिए 2000x2 बाइंडिंग। बाइंडिंग में अंतर होता है: पहले बाइंडिंग केवल एक स्पैन में बाइंडिंग थी। सेकंड में एक बाइंडिंग और कुछ सादे HTML थे। नतीजा: एनजी-बिंद तेजी से लागू होने के प्रति 20% के बारे में था। कोड की जाँच के बिना, ऐसा लगता है, कि एक html तत्व में एक घुंघराले अभिव्यक्ति के साथ अतिरिक्त सादे HTML को और भी अधिक समय लगता है।

— कॉन्स्टेंटिन क्रैस

केवल यह बताना चाहते हैं कि यहाँ के परीक्षणों के अनुसार: jsperf.com/angular-bind-vs-brackets लगता है कि कोष्ठक बाइंड की तुलना में FASTER हैं। (नोट: बार प्रति सेकंड ops हैं, इस प्रकार अब बेहतर है)। और जैसा कि पिछली टिप्पणियां बताती हैं, उनके देखने के तंत्र अंततः समान हैं।

— वॉरेन

क्योंकि आपको कोई स्रोत प्रदान नहीं किया जा रहा है, इसलिए मैं आपको एक देता हूं: ng-perf.com/2014/10/30/… "ng-bind तेज़ है क्योंकि यह अधिक सरल है। प्रक्षेप में संदर्भ के सत्यापन के अतिरिक्त चरणों के माध्यम से जाना है, jsonification मूल्यों और अधिक। यह थोड़ा धीमा बनाता है। "

— कॉन्स्टेंटिन क्रैस

Answer 3

ng-bind से बेहतर है {{...}}

उदाहरण के लिए, आप कर सकते हैं:

<div>
  Hello, {{variable}}
</div>

इसका मतलब यह है कि पूरा पाठ Hello, {{variable}}संलग्न है<div> को कॉपी करके मेमोरी में स्टोर जाएगा।

अगर इसके बजाय आप ऐसा कुछ करते हैं:

<div>
  Hello, <span ng-bind="variable"></span>
</div>

केवल मूल्य का मान मेमोरी में संग्रहीत किया जाएगा, और कोणीय एक द्रष्टा (घड़ी अभिव्यक्ति) को पंजीकृत करेगा जिसमें केवल चर होते हैं।

Comments

दूसरी ओर, आपका DOM अधिक गहरा है। आप जो कर रहे हैं उसके आधार पर, बड़े दस्तावेज़ों में यह प्रतिपादन प्रदर्शन को प्रभावित कर सकता है।

— Stephband

हाँ, मुझे लगता है कि उसी तरह @stephband करता है। यदि आप उदाहरण के लिए केवल नाम और अंतिम नाम प्रदर्शित करना चाहते हैं। सिर्फ प्रक्षेप क्यों नहीं? यह उसी तरह से प्रदर्शन करेगा क्योंकि यह एक ही घड़ियों को 1 डाइजेस्ट में चलाएगा। जैसे: <div> {{firstName}} {{lastName}} </ div> == <div> <span ng-bind = "firstName"> </ span> <span ng-bind = "lastName => </ span> स्पैन> </ div> .. और पहले वाला बेहतर दिखता है। मुझे लगता है कि यह इस बात पर निर्भर करता है कि आप क्या चाहते हैं लेकिन अंत में उनके फायदे और नुकसान दोनों हैं।

— pgarciacamou

<div ng-bind-template="{{ var1 }}, {{ var2}}"></div>{{}} का विकल्प है और ng-bind

— northamerican

यह सेब के लिए सेब नहीं है - आप एक में एक अवधि तत्व को पेश कर रहे हैं, और दूसरे को नहीं। के साथ उदाहरण ng-bindअधिक तुलनीय होगा <div>Hello, <span>{{variable}}</span></div>।

— आइकनोकॉस्ट

Answer 4

मूल रूप से डबल-घुंघराले सिंटैक्स अधिक स्वाभाविक रूप से पठनीय है और इसके लिए कम टाइपिंग की आवश्यकता होती है।

दोनों मामले समान आउटपुट का उत्पादन करते हैं लेकिन .. अगर आप साथ जाना चाहते हैं तो {{}}एक मौका है कि उपयोगकर्ता कुछ मिलीसेकंड के लिए देखेगा {{}}इससे पहले कि आपका टेम्प्लेट कोणीय द्वारा प्रस्तुत किया जाए। इसलिए यदि आप कोई नोटिस करते हैं {{}}तो उपयोग करना बेहतर है ng-bind।

इसके अलावा यह बहुत महत्वपूर्ण है कि आपके कोणीय ऐप के केवल आपके index.html में ही आप अन-रेंडर हो सकते हैं {{}}। यदि आप निर्देशों का उपयोग कर रहे हैं तो टेम्प्लेट, यह देखने का कोई मौका नहीं है क्योंकि कोणीय पहले टेम्प्लेट प्रस्तुत करता है और उसके बाद इसे डोम में जोड़ता है।

Comments

दिलचस्प है कि यह पर्याप्त नहीं है। मुझे एनजी-बाइंड पर कोई आउटपुट नहीं मिलता है। मैं इस मुद्दे पर आया जब एक jekyll प्रोटॉयपे में एक json प्रतिक्रिया का उत्पादन करने की कोशिश कर रहा था, लेकिन इसी तरह के अस्थायी {{}} संघर्ष के कारण, मुझे एनजी-बिंद का उपयोग करने के लिए मजबूर किया गया था। एनजी-रिप ब्लॉक के अंदर एनजी-बाइंड (एअरवाइवियाफैक्ट्री में आइटम) मानों को आउटपुट करेगा।

— इडिवाशेयर

Answer 5

{{...}}दो-तरफ़ा डेटा बाइंडिंग है। लेकिन, एनजी-बिंद वास्तव में वन-वे डेटा बाइंडिंग के लिए है।

एनजी-बिंद का उपयोग करने से आपके पेज में देखने वालों की संख्या कम हो जाएगी। इसलिए एनजी-बाइंड की तुलना में तेज होगा {{...}}। इसलिए, यदि आप केवल एक मान और उसके अपडेट प्रदर्शित करना चाहते हैं, और नियंत्रक से UI में इसके परिवर्तन को प्रतिबिंबित नहीं करना चाहते हैं, तो एनजी-बिंद के लिए जाएं । इससे पृष्ठ प्रदर्शन बढ़ेगा और पृष्ठ लोड समय कम होगा।

<div>
  Hello, <span ng-bind="variable"></span>
</div>

Answer 6

ऐसा इसलिए है क्योंकि {{}}कोणीय संकलक दोनों पाठ नोड पर विचार करता है और यह अभिभावक है क्योंकि इसमें 2 {{}}नोड्स के विलय की संभावना है । इसलिए अतिरिक्त लिंकर्स हैं जो लोड समय में जोड़ते हैं। निश्चित रूप से कुछ ऐसी घटनाओं के लिए अंतर स्थिर है, हालांकि जब आप बड़ी संख्या में वस्तुओं के पुनरावर्तक के अंदर इसका उपयोग कर रहे हैं, तो यह धीमी गति से चलने वाले वातावरण में प्रभाव पैदा करेगा।

Answer 7

एनजी-बिंद का कारण बेहतर है क्योंकि,

जब आपका पृष्ठ लोड नहीं किया जाता है या जब आपका इंटरनेट धीमा होता है या जब आपकी वेबसाइट आधी भरी हुई होती है, तो आप इस प्रकार के मुद्दों को देख सकते हैं (स्क्रीन शॉट को रीड मार्क के साथ देखें) स्क्रीन पर चालू हो जाएगा जो पूरी तरह से अजीब है। ऐसे बचने के लिए हमें Ng-bind का उपयोग करना चाहिए

Answer 8

एनजी-बिंद की अपनी समस्याएं भी हैं। जब आप कोणीय फिल्टर , सीमा या कुछ और का उपयोग करने की कोशिश करते हैं , तो हो सकता है कि आप एनजी-बिंद का उपयोग करें । लेकिन अन्य मामलों में, UX साइड में एनजी- बिंद बेहतर है। जब उपयोगकर्ता कोई पेज खोलता है, तो वह / (10ms-100ms) देखेंगे जो प्रतीकों ( {{}} ) को प्रिंट करता है , इसीलिए एनजी-बिंद बेहतर है ।

Answer 9

{{}} में कुछ टिमटिमाती हुई समस्या है, जैसे जब आप पृष्ठ को रीफ्रेश करते हैं तो समय के एक छोटे स्पैम के लिए अभिव्यक्ति देखी जाती है। तो हमें डेटा चित्रण के लिए अभिव्यक्ति के बजाय एनजी-बाइंड का उपयोग करना चाहिए।

Answer 10

ng-bindयह भी सुरक्षित है क्योंकि यह htmlएक स्ट्रिंग के रूप में प्रतिनिधित्व करता है।

उदाहरण के लिए, '<script on*=maliciousCode()></script>'एक स्ट्रिंग के रूप में प्रदर्शित किया जाएगा और निष्पादित नहीं किया जाएगा।

Answer 11

Angular Doc के अनुसार:
चूँकि ngBind एक तत्व विशेषता है, यह पेज को लोड करते समय उपयोगकर्ता के लिए बाइंडिंग को अदृश्य बना देता है ... यह मुख्य अंतर है ...

मूल रूप से जब तक हर डोम तत्वों को लोड नहीं किया जाता है, तब तक हम उन्हें नहीं देख सकते हैं और क्योंकि ngBind तत्व पर विशेषता है, यह तब तक इंतजार करता है जब तक डोम खेलने में नहीं आते हैं ... नीचे अधिक जानकारी

ngBind
- मॉड्यूल एनजी में निर्देश ngBind विशेषता बताता है AngularJS

किसी दिए गए अभिव्यक्ति के मूल्य के साथ निर्दिष्ट HTML तत्व का पाठ सामग्री को बदलने के लिए, और टेक्स्ट सामग्री अपडेट करने जब कि अभिव्यक्ति परिवर्तन का मूल्य।

आमतौर पर, आप सीधे ngBind का उपयोग नहीं करते हैं , लेकिन इसके बजाय आप {{अभिव्यक्ति}} जैसे दोहरे घुंघराले मार्कअप का उपयोग करते हैं, जो समान लेकिन कम क्रिया है।

यदि {AngularJS संकलित करने से पहले इसकी कच्ची स्थिति में ब्राउज़र द्वारा क्षण भर में टेम्पलेट प्रदर्शित किया जाता है, तो {{अभिव्यक्ति}} के बजाय ngBind का उपयोग करना बेहतर होगा। चूंकि ngBind एक तत्व विशेषता है, यह पेज लोड होते समय उपयोगकर्ता के लिए बाइंडिंग को अदृश्य बना देता है।

इस समस्या का एक वैकल्पिक समाधान ngCloak निर्देश का उपयोग करना होगा । यहाँ जाएँ

ngbind के बारे में अधिक जानकारी के लिए इस पृष्ठ पर जाएं : https://docs.angularjs.org/api/ng/directive/ngBind

आप विशेषता के रूप में कुछ ऐसा कर सकते हैं, एनजी-बिंद :

<div ng-bind="my.name"></div>

या नीचे के रूप में प्रक्षेप करें:

<div>{{my.name}}</div>

या AngularJs में एनजी-क्लोक विशेषताओं के साथ इस तरह:

<div id="my-name" ng-cloak>{{my.name}}</div>

एनजी-लबादा डोम पर चमकती से बचें और तब तक प्रतीक्षा करें जब तक सभी तैयार न हों! यह एनजी-बाइंड विशेषता के बराबर है ...

Answer 12

आप इस साइट को संदर्भित कर सकते हैं यह आपको एक स्पष्टीकरण देगा जो एक बेहतर है जैसा कि मुझे पता है {{}} यह एनजी-बाइंड की तुलना में धीमा है।

http://corpus.hubwiz.com/2/angularjs/16125872.html इस साइट को देखें।