70
在所有AngularJS示例中，Angular庫都放置在文檔的HEAD標記中。我有一個基於HTML5 Boilerplate佈局的現有項目。這定義了JS庫應該放在DOM的最底部，然後放在</BODY>標籤之前。AngularJS in HEAD vs BODY
是否需要將AngularJS放置在HEAD中？
A
回答
74
AngularJS不需要放在HEAD中，實際上你通常不應該，因爲這會阻止加載HTML。
但是，當您在頁面底部加載AngularJS時，您需要使用ng-cloak或ng-bind來避免「未編譯內容的閃爍」。請注意，您只需在您的「index.html」頁面上使用ng-cloak/ng-bind。在初始頁面加載之後，當使用ng-include或ng-view或其他Angular結構來提取附加內容時，該內容將在Angular被顯示之前編譯。
+2
鑑於'ng-cloak'樣式規則（實際上是隱藏的）由angular.js文件添加，這是否仍然會提供未編譯內容的閃光？ – 2013-03-25 21:59:52
+2
@StuCox，是的，但在上面引用的SO答案中，它顯示了您可以包含哪些CSS樣式以避免該問題。 – 2013-03-25 22:04:08
+13
這似乎是一個非常奇怪的建議（即使它是官方的），看到你必須自己定義一個CSS規則，即使它會被腳本加載。冗餘！ 對於大多數Angular應用程序來說，在加載Angular之前加載的HTML實際上是有意義的 - 在沒有Angular的情況下，body中的標記通常是無用的。 – yerforkferchips 2014-07-30 14:18:18
1
不一定。
請看看這個http://plnkr.co/edit/zzt41VUgR332IV01KPsO?p=preview。 其中角度js放置在頁面的底部，並且如果將它放置在頂部，仍呈現相同的輸出。
38
在谷歌論壇這一個答案給我完美的洞察力（縮短）：
這真的取決於你的目標網頁的內容。如果大部分 是靜態的，只有少數AngularJS綁定比是的，我同意，頁面底部是 是最好的。但是如果您想要在完全動態的 內容中加載AngularJS [頭部]。
所以，如果在很大程度上是通過角生成你的內容，你會通過只包括頭角保存自己額外的CSS和ng-cloak指令。
https://groups.google.com/d/msg/angular/XTJFkQHjW5Y/pbSotoaqlkwJ
1
角加載JS在頁面的底部，並導致難看的{{事}} HTML的閃光。在body標籤中使用ng-cloak指令會創建一個空的flash，直到JS被加載，所以它不會比僅僅將AngularJS加載到head元素中增加任何好處。你可以添加ng-cloak給每個有ng指令的元素，但是你最終會得到一個空的元素。 Soooo，只需在Angular文檔中引用Angular和你的app.js文件在head元素中就可以了：「爲了獲得最好的結果，angular.js腳本必須加載到html文檔的head部分」 「
相關問題
- 1. $ injector.instantiate VS $ injector.get VS $ injector.invoke in angularjs
- 2. JavaScript in <head>或只是之前</body>？
- 3. Javascript in <head>在腳本之前執行<body>
- 4. css in head not
- 5. jQuery body fade-in
- 6. $ document.find（'body'）。eq（0）vs $ document [0] .body
- 7. 的Facebook轉換像素代碼：BODY VS HEAD
- 8. HEAD〜vs HEAD^vs HEAD @ {}也被稱爲代字符vs符號vs符號
- 9. Javascript if if in body onload
- 10. Ping vs HTTP HEAD
- 11. array_chunk in email body php
- 12. Ruby：initialize（）vs class body？
- 13. ＆vs @ and = in angularJS有什麼區別
- 14. PHP imap_search（）BODY vs TEXT
- 15. 混帳：HEAD VS頭
- 16. Django render_to_string <body><head>標籤
- 17. 刪除TinyMCE中的html，head，body標籤
- 18. System.config（）調用<head>或<body>？
- 19. jquery動畫插件HEAD與BODY
- 20. 在<head>和末尾<body>
- 21. domready，onload，body，head的含義是什麼？
- 22. <Head>出現在<body>
- 23. Git reset in detached HEAD狀態
- 24. <noscript> in <head>
- 25. jQuery問題：body overflow vs body margin
- 26. body {font-size：100.01％; } vs body {font-size：100％; }？
- 27. mailto-links和linebreaks in body
- 28. request body undefined in node express
- 29. body width and in-line-block elements
- 30. ckEditor in bootstrap modal angularjs
」將腳本標記放置在頁面底部將腳本標記放置在頁面的末尾可以縮短應用程序加載時間，因爲加載的angular.js腳本不會阻止HTML加載。 - [Bootstrap頁面]（http://docs.angularjs.org/guide/bootstrap） – 2013-03-21 02:24:24
對不起 - 我的措辭可能是關閉的。 ENDING正文標記之前的文檔底部的腳本標記。 :) – Cadriel 2013-03-21 08:57:35
最好的做法是將腳本放在正文的底部。然而，如果你的整個站點是由角度驅動的，那麼無論你是做頭還是身體都沒有關係，因爲無論如何，直到所有腳本都執行完畢，內容纔會加載。 – 2016-07-28 15:26:24