web-dev-qa-db-ja.com

AngularJS in HEAD vs BODY

AngularJSのすべての例で、AngularライブラリはドキュメントのHEADタグに配置されています。HTML5で構築された既存のプロジェクトがあります。定型レイアウトこれは、JSライブラリを</BODY>タグの前のDOMの一番下に配置することを定義します。

AngularJSはHEADに配置する必要がありますか?

72
Cadriel

AngularJSはHEADに配置する必要はありません。実際には、HTMLのロードをブロックするため、通常は配置しないでください。

ただし、AngularJSをページの下部に読み込む場合、「 ng-cloak 」または「 ng-bind 」を使用して「コンパイルされていないコンテンツのフラッシュ」を回避する必要があります。 "index.html"ページでng-cloak/ng-bindのみを使用する必要があることに注意してください。 ng-includeまたはng-viewまたは他のAngularコンストラクトを使用して、最初のページの読み込み後に追加のコンテンツをプルすると、そのコンテンツはAngular表示される前。

https://stackoverflow.com/a/14076004/215945 も参照してください

77
Mark Rajcok

Googleグループに関する次の1つの答えにより、完全な洞察が得られました(短縮)。

ランディングページのコンテンツに大きく依存します。そのほとんどが静的であり、AngularJSバインディングがいくつかよりも少ない場合は、ページの下部が最適です。ただし、完全に動的なコンテンツの場合は、AngularJSをできるだけ早くロードすることをお勧めします[頭の中]。

したがって、コンテンツの大部分がAngularを介して生成される場合、余分なCSSとng-cloakディレクティブをAngular=の頭に含めるだけで。

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

40
yerforkferchips

Angularページの下部にJSがあると、ugい{{何か}} htmlのフラッシュが発生します。bodyタグでng-cloakディレクティブを使用すると、JSがngディレクティブを含むすべての要素にng-cloakを追加することはできますが、空の要素がフラッシュすることになります。 Angularおよびhead。要素内のapp.jsファイルはAngularドキュメンテーションは、ドキュメンテーションのこの引用で推奨しています。 "最良の結果を得るには、angular.jsスクリプトは、htmlドキュメントのheadセクションにロードする必要があります」

1
Steve Carey

必ずしも。

これをご覧ください http://plnkr.co/edit/zzt41VUgR332IV01KPsO?p=preview 。 angular jsはページの下部に配置され、上部に配置される場合は同じ出力をレンダリングします。