angularjs - 我应该使用哪种方法来手动引导我的 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 测试有关，因为在此解释comment

plknr

<小时/>

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

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

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

<小时/>

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

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

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

plknr

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