我见过以下内容:
angular.bootstrap(document, ['TodoApp']);
angular.bootstrap(angular.element("body")[0], ['TodoApp']);
AngularJS文档也提到了我并不理解的内容。
angular.element(document).ready(function() {
angular.bootstrap(document);
});
这些方法有什么区别吗?特别是Angular文档的最后一个方法是什么?用一个比另一个好吗?
答案 0 :(得分:63)
它们大致相同,但存在一些差异:
angular.bootstrap(document, ['TodoApp']);
如果您在页面末尾(而不是在标题中)加载了脚本,则此功能将起作用。
否则,在启动应用程序时不会加载DOM(不会有任何模板要编译,指令也没有任何效果)。
这个有效:plnkr
这个不是:plnkr
angular.bootstrap(angular.element("body")[0], ['TodoApp']);
与之前相同,使用body
作为应用程序的根。它使用了jqLite中没有的选择器,因此您需要在应用程序中包含完整jQuery 。
我不确定使用body
代替document
有什么好处,但可能与 e2e testing 有关,正如本{{3 }}
angular.element(document).ready(function() {
angular.bootstrap(document);
});
这个实际等待加载DOM ,因此即使您在脚本中包含脚本也能正常工作。
这与jQuery的$(document).ready(
基本相同,但使用jqLite
的{{1}}。
在上一个示例中,没有模块传递给引导函数,很可能您需要声明主模块,除非您的应用程序仅包含在全局命名空间中的控制器上。
所以最后一个选项将如下所示,以便与其他两个选项类似:
angular.element
我猜大多数时候最安全的赌注是使用最后一种方法。