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

【问题标题】：Which method should I use to manually bootstrap my AngularJS?我应该使用哪种方法来手动引导我的 AngularJS？
【发布时间】：2013-05-08 09:58:21
【问题描述】：

我看到了以下内容：

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

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

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

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

【问题讨论】：

不是响应，而是解释：第三种方式只是 jQuery Lite 的包装。这是在文档完全加载并且可以开始执行脚本时运行某些代码的标准方式。如果您查找任何 jquery 教程，那么您会找到类似 $(document).ready(function(){...}) 的内容。在 Angular 中，angular.element(str) 类似于 $(str)。但请记住，这将使用 jQuery Lite，而不是常规 jQuery。

标签： angularjs

【解决方案1】：

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

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

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

否则，在启动应用程序时将不会加载 DOM（不会编译任何模板，指令将不起作用）。

这个有效：plnkr

这个没有：plnkr

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

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

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

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

这个实际上等待 DOM 被加载，所以即使你在标题中包含你的脚本它也能工作。

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

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

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

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

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

【讨论】：

感谢您的帮助。几个问题。我查看了您的 plknrs，但我注意到我看不到 script.js 文件的内容。我尝试单击 script.js，但它不允许我单击它。这是因为您将它们标记为私有吗？就我而言，我们没有使用 jQuery。那么对于不使用 jQuery 的人，您建议的方法是什么？谢谢
Angular 根本不需要 jQuery，除非你像第二个例子那样做。最后一个对我来说似乎更好，它可以在没有 jQuery 的情况下工作。此外，角度文档中的示例遵循等待 DOM 准备好的方法。
关于 plnkr 的……我不知道有什么问题，他们是匿名的，我没有看到任何特殊设置。
@garc - 不知道为什么，但 plknrs 现在工作正常。我会将您的答案标记为已接受
如果要多次引导，不要使用“document”，而是使用Angular接口的根节点。例如：将“document”替换为“jQuery('[ng-controller=MyAppController]')”