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

Question

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

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

这些方法有什么区别吗？特别是最后一种方法是什么？一个比另一个好用吗？

Answer 1

它们大致相同，但有几个不同之处：

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

如果您将脚本加载到页面的末尾（而不是页眉），这将起作用。

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

这个不是：plnkr

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

与前面相同，使用body作为应用程序的根。它使用了jqLite中没有的选择器，因此需要在应用程序中包含完整的jQuery。

我不确定使用body代替document有什么好处，但可能与e2e测试有关，如本注释所述

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

这一个实际上等待DOM被加载，因此即使您将脚本包含在头中，它也能工作。

这与jQuery的$(document).ready()基本相同，但使用了jQLite的Angular.Element。

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

所以最后一个选项会像下面这样，为了和其他两个类似：

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

PLKNR

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