AngularJS在HEAD和BODY

在所有AngularJS示例中,Angular库都放置在文档的HEAD标签中。 我有一个已经build立在HTML5 Boilerplate布局上的现有项目。 这定义了JS库应该放在DOM </BODY>标签的最底部。

AngularJS是否需要放在HEAD中?

AngularJS并不需要放在HEAD中,实际上你通常不应该这样做,因为这会阻止加载HTML。

但是,当您在页面底部加载AngularJS时,您将需要使用ng-cloak或ng-bind来避免“未编译内容的闪烁”。 请注意,你只需要在你的“index.html”页面上使用ng-cloak / ng-bind。 当使用ng-include或ng-view或其他Angular结构在初始页面加载之后提取附加内容时,该内容将在显示之前由Angular进行编译。

另见https://stackoverflow.com/a/14076004/215945

Google Groups上的这个答案给了我很好的见解(缩写):

这实际上取决于您的着陆页的内容。 如果大部分是静态的,只有很less的AngularJS绑定,我同意,页面的底部是最好的。 但是,如果是完全dynamic的内容,您希望尽快加载AngularJS [在头部]。

因此,如果您的内容是通过Angular大量生成的,您只需在头部添加Angular,即可节省额外的CSS和ng-cloak指令。

https://groups.google.com/d/msg/angular/XTJFkQHjW5Y/pbSotoaqlkwJ

不必要。

请看看这个http://plnkr.co/edit/zzt41VUgR332IV01KPsO?p=preview 。 js被放置在页面底部的位置,如果放置在顶部,仍然呈现相同的输出。

在页面底部加载Angular JS会导致一些丑陋的{{something}} html。 在body标签中使用ng-cloak指令会创build一个空的flash,直到JS被加载,所以它不会比只在head元素中加载AngularJS有什么好处。 你可以添加ng-cloak给每个有ng指令的元素,但是你最终会得到一个空的元素。 Soooo只需在Angular文档中引用Angular和您的app.js文件中的头文件:“为了获得最好的效果,angular.js脚本必须加载到html文档的头部”