44

私は以下を見てきました：

angular.bootstrap(document, ['TodoApp']);
angular.bootstrap(angular.element("body")[0], ['TodoApp']);

また、AngularJS のドキュメントにはこれについて言及されていますが、これは私にはよくわかりません。

   angular.element(document).ready(function() {
     angular.bootstrap(document);
   });

これらの方法に違いはありますか？特に、Angular docs の最後のメソッドは何ですか? どちらかが他のものよりも使いやすいですか？

4

1 に答える 1

65

これらはほぼ同じですが、いくつかの違いがあります。

angular.bootstrap(document, ['TodoApp']);

これは、 (ヘッダーではなく)ページの最後にスクリプトをロードした場合に機能します。

そうしないと、アプリのブート時に DOM が読み込まれません (コンパイルするテンプレートがなく、ディレクティブは効果がありません)。

これは機能します：plnkr

これはそうではありません：plnkr 

angular.bootstrap(angular.element("body")[0], ['TodoApp']);

前と同じようにbody、アプリケーションのルートとして使用します。jqLit​​e では使用できないセレクターを使用するため、完全な jQueryをアプリに含める必要があります。

body代わりに使用する利点が何かはわかりませんが、このコメントdocumentで説明されているように、おそらくe2e testingと関係があります

plknr

angular.element(document).ready(function() {
  angular.bootstrap(document);
});

これは実際には DOM がロードされるのを待つため、ヘッダーにスクリプトを含めても機能します。

これは基本的に jQuery の と同じです$(document).ready(が、 を使用していjqLiteますangular.element。

最後の例では、ブートストラップ関数にモジュールが渡されていません。アプリがグローバル名前空間のコントローラーのみで構成されていない限り、ほとんどの場合、メイン モジュールを宣言する必要があります。

したがって、最後のオプションは、他の 2 つと同様にするために、次のようになります。

angular.element(document).ready(function() {
  angular.bootstrap(document, ['TodoApp']);
});

plknr

ほとんどの場合、最も安全な方法はこの最後のアプローチを使用することだと思います。

于 2013-05-14T09:21:48.947 に答える