कब एनजी-अगर बनाम एनजी-शो / एनजी-छिपाने का पक्ष लें?

516

मुझे लगता है कि समझ में ng-showऔर ng-hideएक तत्व पर वर्ग सेट और उस को प्रभावित ng-ifनियंत्रण एक तत्व डोम के भाग के रूप में प्रदान की गई है या नहीं।

क्या इसके अतिरिक्त / या इसके विपरीत चुनने ng-ifपर दिशानिर्देश हैं?ng-showng-hide

angularjs angularjs-directive

— पैट्रिस चैलिन
स्रोत

5

एनजी-अगर और एनजी-शो / एनजी-छिपाने के बीच अंतर क्या है के

— गज़ुस

1

डार्ट भाषा से संबंधित नहीं है ।

— नाका

703

आपके उपयोग के मामले पर निर्भर करता है लेकिन अंतर को संक्षेप में प्रस्तुत करने के लिए:

ng-ifDOM से तत्वों को हटा देगा। इसका मतलब यह है कि आपके सभी हैंडलर या उन तत्वों से जुड़ी कोई भी चीज खो जाएगी। उदाहरण के लिए, यदि आप किसी एक बाल तत्व पर क्लिक हैंडलर को बाध्य करते हैं, जब ng-ifअसत्य का मूल्यांकन करता है, तो उस तत्व को DOM से हटा दिया जाएगा और आपका क्लिक हैंडलर किसी भी तरह से काम नहीं करेगा, भले ही ng-ifबाद में सत्य का मूल्यांकन हो और तत्व प्रदर्शित करता हो। आपको हैंडलर को रीटच करने की आवश्यकता होगी।
ng-show/ng-hideDOM से तत्वों को नहीं हटाता है। यह तत्वों को छिपाने / दिखाने के लिए सीएसएस शैलियों का उपयोग करता है (ध्यान दें: आपको अपनी कक्षाएं जोड़ने की आवश्यकता हो सकती है)। इस तरह आपके हैंडलर जो बच्चों से जुड़े हुए थे वे गुम नहीं होंगे।
ng-ifएक बच्चा गुंजाइश बनाता है जबकि ng-show/ng-hideनहीं करता है

वे तत्व जो DOM में नहीं हैं, उनका प्रदर्शन प्रभाव कम है और आपके वेब ऐप ng-ifकी तुलना में उपयोग करते समय तेज़ी से दिखाई दे सकते हैं ng-show/ng-hide। मेरे अनुभव में, अंतर नगण्य है। दोनों का उपयोग करते समय एनिमेशन संभव हैं ng-show/ng-hideऔर ng-ifदोनों के लिए कोणीय प्रलेखन में उदाहरण के साथ।

अंत में, आपको जिस प्रश्न का उत्तर देने की आवश्यकता है वह यह है कि क्या आप तत्व को DOM से निकाल सकते हैं या नहीं?

— markovuksanovic
स्रोत

19

आप CSS3 के एनिमेशन का उपयोग कर सकते हैं ng-if। डॉक्स में एनिमेशन पैराग्राफ और उदाहरण की जाँच करें । इसके अलावा के साथ ng-hide/ng-showसीएसएस चयनकर्ताओं की तरह :first-childया :nth-childठीक से काम नहीं करेगा क्योंकि छिपा हुआ तत्व भी गिना जाएगा।

— कासज़ वोज्शोव्स्की

4

Angular.dart में एनिमेशन सेवा अपेक्षाकृत नई है। यह लिखने के समय यह उपलब्ध नहीं था।

— मार्कोवक्सानोविक

44

यदि आप संचालकों को बांधने के लिए निर्देशों (जैसे एनजी-क्लिक) का उपयोग कर रहे हैं, तो आप पहला बिंदु एक गैर-मुद्दा है।

— केविन सी।

9

इसके अलावा, ng-ifनया स्कोप ng-showनहीं बनाता है ।

— मार्टिन

8

यह भी उल्लेख किया जाना चाहिए कि डोम से तत्वों को जोड़ने और हटाने से उच्च प्रदर्शन लागत को रोका जा सकता है यदि अक्सर किया जाता है।

— केविन सी।

130

एक CodePen के लिए यहाँ देखें कि कैसे ng-if / ng-show कार्य, DOM- वार में अंतर प्रदर्शित करता है।

@markovuksanovic ने प्रश्न का अच्छी तरह से उत्तर दिया है। लेकिन मैं इसे दूसरे दृष्टिकोण से आता हूं: मैं हमेशाng-if उन तत्वों का उपयोग करता हूं और उन तत्वों को डोम से बाहर निकालता हूं , जब तक कि:

जब आप $watchअदृश्य हों , तो किसी कारण से आपको अपने तत्वों पर डेटा-बाइंडिंग और -es की आवश्यकता होती है । इसके लिए प्रपत्र एक अच्छा मामला हो सकता है, यदि आप उन इनपुट पर वैधता की जांच करना चाहते हैं जो वर्तमान में दिखाई नहीं दे रहे हैं, तो यह निर्धारित करने के लिए कि क्या पूरा फॉर्म वैध है।
आप सशर्त घटना संचालकों के साथ कुछ विस्तृत विवरणीय तर्क का उपयोग कर रहे हैं, जैसा कि ऊपर बताया गया है। उस ने कहा , यदि आप स्वयं को मैन्युअल रूप से संलग्न और संचालकों को देखते हैं, जैसे कि आप एनजी-का उपयोग करते समय महत्वपूर्ण स्थिति खो रहे हैं, तो अपने आप से पूछें कि क्या उस राज्य का डेटा मॉडल में बेहतर प्रतिनिधित्व होगा, और जब भी निर्देशकों द्वारा संचालकों को सशर्त रूप से लागू किया जाता है तत्व का प्रतिपादन किया गया है। दूसरा तरीका रखो, हैंडलर की उपस्थिति / अनुपस्थिति राज्य डेटा का एक रूप है। उस डेटा को DOM से बाहर निकालें, और एक मॉडल में। संचालकों की उपस्थिति / अनुपस्थिति को डेटा द्वारा निर्धारित किया जाना चाहिए, और इस प्रकार इसे पुनः बनाना आसान है।

कोणीय वास्तव में अच्छी तरह से लिखा गया है। यह तेज़ है, यह देखते हुए कि यह क्या करता है। लेकिन यह क्या करता है जादू का एक पूरा गुच्छा है जो कठिन चीजें बनाता है (जैसे 2-रास्ता डेटा-बाइंडिंग) तुच्छ रूप से आसान दिखता है। उन सभी चीजों को आसान बनाना कुछ प्रदर्शन ओवरहेड को मजबूर करता है। आप यह महसूस करने के लिए हैरान हो सकते हैं $digestकि DOM के एक कूबड़ पर चक्र के दौरान सैकड़ों या हजारों बार एक सेटर फ़ंक्शन का मूल्यांकन किया जाता है जो किसी को भी नहीं दिख रहा है। और तब आपको पता चलता है कि आप दर्जनों या सैकड़ों अदृश्य तत्व एक ही काम कर रहे हैं ...

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

— एक्सएमएल
स्रोत

6

उपरोक्त उत्तर के लिए बहुत अच्छा इसके अतिरिक्त। कुछ अच्छे संदर्भों के साथ, जो निर्णय लेने में भी मदद करता है। धन्यवाद।

— सीन

1

ng-showजब आपके पास उपयोगी हो, तो कह सकते हैं कि प्रत्येक को बहुत सारी सामग्री मिलती है जो रेंडर करने में समय लेती है। पहले रेंडरिंग के बाद, टैब के बीच बढ़ना तत्काल ng-ifहोगा , जबकि री-रेंडरिंग, बाइंडिंग इवेंट्स आदि की आवश्यकता होगी। जैसा कि आप कहते हैं, यह पृष्ठभूमि में निष्पादित घड़ियों को बनाता है। कोणीय की सख्त जरूरत हैng-ifshowwatch

— पॉशेस्ट

53

मेरे अनुभव से:

1) यदि आपके पृष्ठ में एक टॉगल है जो किसी चीज़ को दिखाने / छुपाने के लिए ng-if / ng-show का उपयोग करता है, तो ng-if किसी ब्राउज़र विलंब (धीमे) के अधिक होने का कारण बनता है। उदाहरण के लिए: यदि आपके पास दो विचारों के बीच टॉगल करने के लिए उपयोग किया जाने वाला बटन है, तो एनजी-शो तेज़ होने लगता है।

2) एनजी-अगर स्कोप बनाएगा / नष्ट करेगा जब यह सही / गलत का मूल्यांकन करता है। यदि आपके पास ng-if से जुड़ा कोई नियंत्रक है, तो उस नियंत्रक कोड को हर बार एनजी-if का मूल्यांकन सही होने पर निष्पादित किया जाएगा। यदि आप एनजी-शो का उपयोग कर रहे हैं, तो नियंत्रक कोड केवल एक बार निष्पादित होता है। इसलिए यदि आपके पास एक बटन है जो एनजी-इफ और एनजी-शो का उपयोग करके कई विचारों के बीच टॉगल करता है, तो आप अपने नियंत्रक कोड को कैसे लिखते हैं, इससे बहुत फर्क पड़ेगा।

— य Z
स्रोत

5

यह बहुत बड़ा सच है! एनजी-अगर जरूरी नहीं कि आपके सामने का भाग तेज हो। यह आपकी आवश्यकताओं पर निर्भर करता है। वास्तव में अगर आप गलत स्थिति में उपयोग कर रहे हैं तो यह दूसरा रास्ता बना सकता है।

— थियागो सी। एस। वेंचुरा

1

लेकिन मेरे अनुसार एनजी-अगर डोम पर प्रस्तुत नहीं करता है, तो यह एनजी-शो / छिपाने की तुलना में तेज़ है। मैं गलत हूँ pls मुझे उस बिंदु पर सही करने दें।

— परदीप जैन

1

एनजी-अगर यह असत्य का मूल्यांकन करता है तो तेजी से होगा, क्योंकि आप कहते हैं, डोम में कुछ भी डालने की आवश्यकता नहीं है। लेकिन, अगर यह सच है, तो आपके पास DOM में तत्व - संभवतः काफी जटिल - सम्मिलित करने का ओवरहेड है।

— मावग का कहना है कि मोनिका

"2) एनजी-अगर सही / गलत का मूल्यांकन करने पर स्कोप बनाएगा / नष्ट करेगा। यदि आपके पास एनजी से जुड़ा कोई नियंत्रक है, तो उस कंट्रोलर कोड को हर बार निष्पादित किया जाएगा"

— रेड मटर

35

उत्तर सरल नहीं है:

यह लक्ष्य मशीनों (मोबाइल बनाम डेस्कटॉप) पर निर्भर करता है, यह आपके डेटा की प्रकृति, ब्राउज़र, ओएस, उस पर चलने वाले हार्डवेयर पर निर्भर करता है ... यदि आपको वास्तव में जानना है तो आपको बेंचमार्क करने की आवश्यकता होगी।

यह ज्यादातर एक मेमोरी बनाम कम्प्यूटेशन समस्या है ... अधिकांश प्रदर्शन मुद्दों के साथ अंतर बार-बार तत्वों (एन) जैसे सूचियों के साथ महत्वपूर्ण हो सकता है , खासकर जब नेस्टेड (एनएक्सएन, या इससे भी बदतर) और यह भी कि आप इन तत्वों के अंदर किस तरह की गणना करते हैं। :

एनजी-शो : यदि वे वैकल्पिक तत्व अक्सर मौजूद (घने) होते हैं, जैसे कि 90% समय, तो उन्हें तैयार होने में तेज हो सकता है और केवल उन्हें दिखा / छिपा सकता है, खासकर यदि उनकी सामग्री सस्ती है (सिर्फ सादा पाठ, कुछ नहीं गणना करना या लोड करना)। यह मेमोरी को खा जाता है क्योंकि यह DOM को छिपे हुए तत्वों से भर देता है, लेकिन बस कुछ दिखा / छिपाता है जो पहले से मौजूद है, ब्राउज़र के लिए एक सस्ता ऑपरेशन होने की संभावना है।
एनजी-अगर : यदि इसके विपरीत तत्वों को दिखाए जाने की संभावना नहीं है (विरल) तो उन्हें बनाएं और उन्हें वास्तविक समय में नष्ट कर दें, खासकर अगर उनकी सामग्री प्राप्त करने के लिए महंगा है (गणना / छंटनी / छननी, चित्र, उत्पन्न चित्र)। यह दुर्लभ या 'ऑन-डिमांड' तत्वों के लिए आदर्श है, यह DOM को न भरने के संदर्भ में मेमोरी बचाता है, लेकिन बहुत अधिक संगणना (तत्वों को नष्ट / नष्ट करना) और बैंडविड्थ (दूरस्थ सामग्री प्राप्त करना) खर्च कर सकता है। यह इस बात पर भी निर्भर करता है कि आप दृश्य में कितनी गणना करते हैं (फ़िल्टरिंग / छँटाई) बनाम जो आपके पास पहले से मॉडल में है (पूर्व-छांटे गए / पूर्व-फ़िल्टर किए गए डेटा)।

— क्रिस्टोफ़ रूसो
स्रोत

2

तकनीकी तथ्यों के लिए अन्य जवाब। ज्ञान के लिए यह एक। आपने स्पष्ट रूप से गैर-तुच्छ कोणीय एप्लिकेशन बनाया है सर! +1

— poshest

यह समस्या कोणीय से परे जाती है, यह कंप्यूटर विज्ञान में एक मूलभूत समस्या है, एक बिंदु है जहां से एक विधि दूसरे की तुलना में अधिक कुशल है। आमतौर पर यह कुछ बेंचमार्किंग के माध्यम से पाया जा सकता है। इसलिए आप आइटम गणना के आधार पर एक विधि और दूसरे के बीच भी स्विच कर सकते हैं ... समान विषय: math.stackexchange.com/questions/1632739/…

— क्रिस्टोफ

12

एक महत्वपूर्ण नोट:

ngIf (ngShow के विपरीत) आमतौर पर बच्चे के स्कोप बनाता है जो अप्रत्याशित परिणाम उत्पन्न कर सकते हैं।

मेरे पास इससे संबंधित एक मुद्दा था और मैंने यह जानने के लिए MUCH समय बिताया है।

(मेरा निर्देश गलत दायरे के लिए अपने मॉडल मूल्यों को लिख रहा था।)

तो, अपने बालों को बचाने के लिए बस ngShow का उपयोग करें जब तक कि आप बहुत धीमी गति से न चलाएं।

प्रदर्शन अंतर वैसे भी मुश्किल से ध्यान देने योग्य है और मुझे अभी तक इस बात पर यकीन नहीं है कि यह बिना किसी परीक्षण के किसका पक्ष है ...

— user2173353
स्रोत

8

$parent.scopevarएक एनजीआई के भीतर डेटा बाइंडिंग में उपयोग करने से चाइल्ड स्कोप मुद्दों जैसी चीजें ठीक हो जाएंगी जब एनजीआईएफ

— मेकोनारियो

2

यह पूरी तरह सच नहीं है (मूल @ user2173353 की टिप्पणी, यह है)। यदि आप अच्छी प्रथाओं से चिपके रहते हैं, तो आप मुश्किल में नहीं पड़ेंगे। यह एक बहुत ही बुनियादी नियम है: "अगर कोई डॉट नहीं है, तो आप इसे गलत कर रहे हैं"। यहाँ यह कैसे काम करता का एक डेमो के लिए देखें: bit.ly/1SPv4wL । एक और महान संदर्भ (गलती # 2 देखें): bit.ly/1QfFeWd > (मेरा निर्देश इसके मॉडल मूल्यों को गलत दायरे में लिख रहा था।) यह उपरोक्त अभ्यास से न चिपके रहने का परिणाम है।

— piotr.d

1

@ piotr.d आप सही हैं, लेकिन यह ऐसा कुछ नहीं है जिस पर शुरुआत करने वाले को ध्यान केंद्रित करने की आवश्यकता हो सकती है और एक और सबसे अच्छा अभ्यास है जो कहता है कि अंत के लिए प्रदर्शन में सुधार करना बेहतर है (विशेष रूप से प्रदर्शन में सुधार जो वास्तविकता में सुधार नहीं हो सकता है )। मैंने लोगों को ngIfहर जगह यह विश्वास करते हुए देखा है कि इससे प्रदर्शन में सुधार होगा। यह बस सच नहीं है और कोई यह नहीं कह सकता है कि कौन सबसे अच्छा है, ngIfया ngShow, किसी विशेष मामले में परीक्षण या गहन विश्लेषण के बिना। इसलिए, मैं अभी भी भूल जाने की सलाह देता हूं ngIf, जब तक कि कोई व्यक्ति खराब प्रदर्शन नहीं देखता या जानता है कि वह क्या कर रहा है

— user2173353

2

अच्छी बात। लेकिन कंट्रोलर का उपयोग करना इसे गैर-मुद्दा बनाता है। , देखें उदाहरण के लिए, controllerAs और वी एम पर जॉन पिताजी के ले ।

— jsruok

4

एनजी-अगर एनजी-इन पर और एनजी-नियंत्रक पर एनजी-नियंत्रक पर एक बड़ा प्रभाव मामला होगा, इसमें आवश्यक आंशिक लोड नहीं होगा और जब तक ध्वज एनजी-नियंत्रक पर सत्य नहीं होगा, तब तक यह नियंत्रक को लोड नहीं करेगा जब तक कि झंडा न हो सच है, लेकिन समस्या यह है कि जब कोई झंडा एनजी में गलत हो जाता है, तो वह डोम से हटा देगा जब झंडा सच हो जाता है तो वह डोम को फिर से लोड कर देगा इस मामले में एनजी-शो बेहतर है, एक समय के लिए शो एनजी-अगर बेहतर है

— साद अहमद
स्रोत

4

यदि आप ng-show or ng-hideसामग्री का उपयोग करते हैं (उदाहरण के लिए सर्वर से थंबनेल) अभिव्यक्ति के मूल्य के बावजूद लोड किया जाएगा, लेकिन अभिव्यक्ति के मूल्य के आधार पर प्रदर्शित किया जाएगा।

यदि आप ng-ifसामग्री का उपयोग करते हैं तो केवल लोड किया जाएगा यदि एनजी की अभिव्यक्ति-अगर सत्य का मूल्यांकन करती है।

एनजी-अगर का उपयोग करना एक ऐसी स्थिति में एक अच्छा विचार है जहां आप सर्वर से डेटा या छवियों को लोड करने जा रहे हैं और केवल उन लोगों को दिखाते हैं जो उपयोगकर्ताओं की बातचीत पर निर्भर करते हैं। इस तरह आपका पृष्ठ भार अनावश्यक nw गहन कार्यों द्वारा अवरुद्ध नहीं होगा।

— appdroid
स्रोत

यह विशेष रूप से उपयोगी है क्योंकि अधिकांश ब्राउज़र छवियों को लोड करेंगे भले ही सीएसएस अपने डोम कंटेनर को छिपाए। वे आम तौर पर टैग की srcविशेषता की तलाश करते हैं img, जब वर्तमान में यह लोड हो जाता है!

— क्रिस्टोफ रूसो