angularjs - 我应该使用哪种方法来手动引导我的 AngularJS？

Question

我看过以下内容：

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

AngularJS 文档也提到了这一点，我不太明白。

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

这些方法之间有什么区别吗？特别是 Angular 文档中的最后一个方法是什么？一个比另一个更好用吗？

score 65 · Accepted Answer

它们大致相同，但有一些区别：

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

如果您在页面末尾（而不是在标题中）加载脚本，这将起作用。

否则，在引导应用程序时将不会加载 DOM（不会有任何模板要编译，指令不会有任何效果）。

这个有效：plnkr

这个没有：plnkr

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

和以前一样，body用作应用程序的根。它使用了 jqLite 中不可用的选择器，因此您需要在应用程序中包含完整的 jQuery。

我不确定使用它的好处是什么body，document但可能与e2e 测试有关，如本评论中所述

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

这个实际上是在等待 DOM被加载，因此即使您在标头中包含脚本，它也会起作用。

这与 jQuery's 基本相同$(document).ready(，但使用jqLite's angular.element。

在最后一个例子中，没有模块被传递给引导函数，很可能你需要声明你的主模块，除非你的应用程序只包含在全局命名空间中的控制器上。

所以最后一个选项将如下所示，以便与其他两个类似：

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

我想大多数时候最安全的选择是使用最后一种方法。

1 回答 1