我应该使用哪种方法来手动引导我的 AngularJS? [英] Which method should I use to manually bootstrap my AngularJS?

问题描述

我看到了以下内容:

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

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

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

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

解决方案

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

<小时>

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

如果您在页面末尾(而不是在标题中)加载了脚本，这将起作用.

否则，在启动应用程序时将不会加载 DOM(不会有任何模板需要编译，指令也不会产生任何效果).

这个有效:plnkr

这个没有:plnkr

<小时>

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

和之前一样，使用 body 作为应用程序的根.它使用 jqLit​​e 中没有的选择器，因此您需要在应用程序中包含完整的 jQuery.

我不确定使用 body 代替 document 有什么好处，但可能与 e2e 测试有关，因为在此评论

中进行了解释

plknr

<小时>

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

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

这与 jQuery 的 $(document).ready( 基本相同，但使用了 jqLit​​e 的 angular.element.><小时>

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

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

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

plknr

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

I have seen the following:

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

Also the AngularJS documentation mentions this which I don't really understand.

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

Is there any difference between these methods? In particular what is the last method from the Angular docs doing? Is one any better to use than the other?

解决方案

They are roughly the same, with a few differences:

---

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

This will work if you have your scripts loaded at the end of the page (instead of in the header).

Otherwise, the DOM will not be loaded at the time of bootrsaping the app (there won't be any template to be compiled, the directives won't have any effect).

This one works: plnkr

This one doesn't: plnkr

---

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

The same as before, using body as the root of the application. It uses a selector that is not available in jqLite, so you need to have full jQuery included in the app.

I'm not sure what is the advantage of using body instead document, but probably has something to do with e2e testing, as explained in this comment

plknr

---

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

This one actually waits for the DOM to be loaded, so it will work even if you include your scripts in the header.

This is basically the same as jQuery's $(document).ready( , but using jqLite's angular.element.

---

In the last example, no modules are being passed to the bootstrap function, most likely you will need to declare your main module, unless your app consists only on controllers in the global namespace.

So the last option will be like the following, in order to be similar to the other two:

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

plknr

I guess that most of the time the safest bet is using this last approach.

这篇关于我应该使用哪种方法来手动引导我的 AngularJS?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！