सिर बनाम शरीर में AngularJS




html5boilerplate (3)

AngularJS उदाहरणों में, कोणीय पुस्तकालय दस्तावेज़ के HEAD टैग में रखा गया है। मेरे पास एक मौजूदा प्रोजेक्ट है जो HTML5 बॉयलरप्लेट लेआउट पर बनाया गया है। यह परिभाषित करता है कि </BODY> टैग से पहले डीओएम के बहुत नीचे जेएस पुस्तकालयों को रखा जाना चाहिए।

क्या AngularJS को सिर में रखा जाना चाहिए?


AngularJS को HEAD में रखने की आवश्यकता नहीं है, और वास्तव में आपको सामान्य रूप से नहीं करना चाहिए, क्योंकि यह HTML को लोड करना अवरुद्ध करेगा।

हालांकि, जब आप पृष्ठ के निचले हिस्से में एंगुलरजेएस लोड करते हैं, तो आपको "असंगत सामग्री के फ्लैश" से बचने के लिए ng-cloak या ng-bind का उपयोग करने की आवश्यकता होगी। ध्यान दें कि आपको अपने "index.html" पृष्ठ पर केवल ng-cloak / ng-bind का उपयोग करने की आवश्यकता है। जब प्रारंभिक पृष्ठ लोड के बाद अतिरिक्त सामग्री में खींचने के लिए एनजी-शामिल या एनजी-व्यू या अन्य कोणीय संरचनाओं का उपयोग किया जाता है, तो उस सामग्री को प्रदर्शित होने से पहले कोणीय द्वारा संकलित किया जाएगा।

https://.com/a/14076004/215945 भी https://.com/a/14076004/215945


Google समूह पर यह एक जवाब मुझे सही अंतर्दृष्टि (छोटा) दिया:

यह वास्तव में आपके लैंडिंग पृष्ठ की सामग्री पर निर्भर करता है। यदि इनमें से अधिकतर हां से कुछ अंगुलरजेएस बाइंडिंग के साथ स्थिर है, तो मैं सहमत हूं कि पृष्ठ का निचला भाग सबसे अच्छा है। लेकिन पूरी तरह से गतिशील सामग्री के मामले में आप AngularJS ASAP [सिर में] लोड करना चाहते हैं।

इसलिए यदि आपकी सामग्री अंगुलर के माध्यम से बड़े हिस्से में उत्पन्न होती है, तो आप सिर में कोणीय समेत अतिरिक्त सीएसएस और ng-cloak निर्देशों को बचाएंगे।

https://groups.google.com/d/msg/angular/XTJFkQHjW5Y/pbSotoaqlkwJ


पृष्ठ के निचले हिस्से में कोणीय जेएस लोड हो रहा है जिसके परिणामस्वरूप बदसूरत {{something}} html का फ्लैश होता है। शरीर टैग में एनजी-क्लोक निर्देश का उपयोग करके जेएस लोड होने तक एक खाली फ्लैश बनाता है, इसलिए यह हेड एलिमेंट में एंगुलरजेएस लोड करने पर कोई लाभ नहीं जोड़ता है। आप एनजी-क्लोक को प्रत्येक तत्व में एनजी निर्देशों के साथ जोड़ सकते हैं लेकिन आप रिक्त तत्वों के फ्लैश के साथ समाप्त हो जाएंगे। Soooo, केवल अंगुलर और अपनी app.js फ़ाइलों को मुख्य तत्व में लोड करें क्योंकि कोणीय दस्तावेज़ इस उद्धरण में उनके उद्धरण से अनुशंसा करता है: "सर्वोत्तम परिणाम के लिए, angular.js स्क्रिप्ट को HTML दस्तावेज़ के मुख्य भाग में लोड किया जाना चाहिए"





html5boilerplate