我应该使用哪种方法手动引导AngularJS？

Question

我已经看到以下内容：

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

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

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

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

Answer 1

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

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

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

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

此作品：plnkr

这不是：plnkr

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

与之前相同，body用作应用程序的根。它使用jqLit​​e中不提供的选择器，因此您需要在应用程序中包含 完整的jQuery 。

我不确定使用body相反的优势是什么document，但可能与 e2e测试有关
，如此评论中所述

k

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

实际上 ， 这是一个 等待DOM 加载的过程，因此即使您将脚本包括在标头中，它也将起作用。

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

在最后一个示例中，没有模块传递给bootstrap函数，除非您的应用仅包含在全局名称空间中的控制器上，否则您很有可能需要声明主模块。

因此，最后一个选项将类似于以下内容，以便与其他两个类似：

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

k

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