ng-appディレクティブの配置（html vs body）

103

私は最近、angularで構築されたWebアプリケーションのコードを確認しましたがng-app="myModule"、<body>タグに配置されたディレクティブで記述されていることがわかりました。angularを学ぶとき、私はこれが<html>タグで使用されているのを見たことがあります。angulardocs here、here、およびそれらのチュートリアルで推奨されています。

私はこれを自分で少し調べましたが、ページに対する複数のモジュールのロードについて説明しているSOの質問、特にこの質問と同様にこの質問を見つけました。ただし、この手法は、本体内の要素にng-appを配置し、手動のブートストラップを使用して2つの角度付きアプリを同時に実行するため、私の場合とは異なります。

私の知る限りでは、実行時にng-appon <html>またはを使用したアプリに違いはありません<body>。私が理解しているようにng-app、Angleアプリケーションのルートを指定します。そのため、これをに配置すると、Angleのスコープから除外<body>さ<head>れますが、これが物事に影響する主な方法は考えられません。だから私の質問は：ng-appこれらのタグのいずれかを他のタグの代わりに配置することの技術的な違いは何ですか？

angularjs

— MattDavis
ソース

回答:

144

どこに置いても大きな違いはありませんng-app。

オン<body>にすると、AngularJSのスコープが小さくなり、やや高速になります。

しかしng-app、<html>を操作するためにを使用しました<title>。

— ハララン・ドブレフ
ソース

答えてくれてありがとう！これは基本的に私が思いついた結論なので、他の人が同じように考えていると聞いて良かったです。なぜそれがより速く、どれほど速くなるのか正確に興味があります。あなたはそれをもっと説明できますか、それともこれを説明できるリファレンスがありますか？

— MattDavis 2013

ほんの少し速いという意味です。最小限です。スコープが小さいほど、AngularJSがディレクティブを検索する要素が少なくなります。たとえば、Open Graphのメタ要素が大量にある場合、わずかな影響しかありません。

— Haralan Dobrev 2013

題名。それが本当の理由です。

— ahnbizcad 2014

タイトルを変更するには、単純なJavaScriptを使用するだけです。

— Sean_A91

@ Sean_A91ただし、ページ全体をAngularJSで実行している場合は、Angularを使用する方が理にかなっています。より一貫性があり、保守性が向上し、ページ本体でタイトルモデルを再利用することもできます。

— Haralan Dobrev

私はレガシーアプリに取り組んでいるチームにいて、新しいコードをレガシーコードから分離するためのラッパーとして使用されるdivでng-appタグを使用するのが最善であるとわかりました。

jqGridとDojoに大きく依存しているアプリで作業しているときに、これを発見しました。

ng-appをheadタグに追加するとサイトが破壊されましたが、ラッパーを使用すると問題なくAngularを使用できました。

— ピーター・ドリンナン
ソース

これは、Angularの3つのユースケースを区別する良い例です。「シングルページアプリ」、「スタンドアロン」（つまり、ページを引き継ぎますが、他のページへの通常のリンクを使用します）、「mixin」（つまり、ほんの少しページ）。ミックスインの使用法を正確に説明しましたが、その場合、完全に合意されたng-appは、ミックスインが適用されるdivにのみ存在する必要があります。ただし、スタンドアロンまたはSPAの使用については、<html>にあるはずです。

— fool4jesus 14

@ fool4jesus Angularのさまざまな使用オプションに関する記事を知っていますか？もちろん、推奨されるSPAバージョンについてはたくさんありますが、最近私はjQueryの多いコードベースにAngularを追加する必要があり、それを成功させるためにここで最良のオプションは何であり、狂わないようにしようと思っていました。

— Senthe

@Sentheはトリッキーなことです。間違いなく発見したように、angularは独自のDOMainを担当することを好みます。ページの重なり合う領域ではなく、その領域の制御についてだと思います。つまり、角度領域でもjqueryを使用できますが、ページが既に存在する場合は、角度コードから始めます-簡単ではありません！言い換えれば、<script>タグ間のものが角度構成体（コントローラーとディレクティブ）に移動しなければならないのと同じくらい、実行する必要があるのはjquery呼び出しではありません。それは意味がありますか？

— fool4jesus 2016年

AngularJSは最初に見つけたng-appをブートストラップします！それでおしまい。複数のng-appがある場合、最初のng-appのみを処理します。他の要素をブートストラップしたい場合は、angular.bootstrap（）を使用してください。

ng-app属性の値は、以下を使用して作成されたモジュールです。

angular.module("module_name", [])

モジュールは、他のプログラミング言語とは異なりmain（）メソッドがないため、angularがどのようにブートストラップされるかを定義します。ng-appの値が空の場合、デフォルトのモジュールである「ng」がデフォルトで使用されます。

angularはng-appがあった要素内のすべての要素を処理するので、少し速いと言われていました。しかし、非常にかさばるDOMがない限り、その違いはほとんど目立たないので、少しは疑問です。

ここに例が必要な場合：http : //noypi-linux.blogspot.com/2014/07/angularjs-tutorials-understanding.html

— ノイピギラス
ソース