我应该使用哪种方法手动引导我的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作为应用程序的根目录.它使用了jqLite中没有的选择器,因此您需要在应用程序中包含完整的jQuery.

我不知道什么是使用的优点body,而不是document,但可能有事情做与端到端测试,在此解释评论

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

这个实际上等待加载DOM,所以即使你在脚本中包含你的脚本它也会工作.

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

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

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

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

我猜大多数时候最安全的赌注是使用最后一种方法.