HEAD vs身体中的AngularJS

72

在所有AngularJS示例中，Angular库都放置在文档的HEAD标签中。我有一个基于HTML5 Boilerplate布局的现有项目。这就定义了JS库应该放置在DOM最底部的</BODY>标签之前。

AngularJS是否需要放在HEAD中？

angularjs html5boilerplate

— 卡德里尔
source

“将脚本标签放在页面底部。在页面末尾放置脚本标签可以缩短应用程序的加载时间，因为HTML的加载不会被angular.js脚本的加载阻止。” -引导页

— 马克Rajcok

抱歉-我的措辞可能不对。脚本标签位于文档底部ENDING正文标签之前。:)

— Cadriel

最佳实践是将脚本放在正文的底部。但是，如果整个站点是由角度驱动的，那么头还是身体都没关系，因为在所有脚本都执行完之前，内容不会加载。

— 马特·皮莱吉

77

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

— 马克·拉杰科克
source

2

假定ng-cloak由angular.js文件添加了样式规则（实际上是进行隐藏），这是否仍会显示未编译的内容？

— Stu Cox

2

@StuCox，是的，但是在我上面引用的SO答案中，它显示了可以包括哪些CSS样式来避免此问题。

— Mark Rajcok

14

这似乎是一个非常奇怪的建议（即使它是官方的），因为您必须自己定义一个CSS规则，即使该规则将由脚本加载。冗余！对于大多数Angular应用程序来说，在Angular加载之前不加载HTML实际上是有道理的-如果没有Angular，主体中的标记通常几乎没有用。

— yerforkferchips 2014年

41

这个有关Google网上论坛的答案给了我完美的见解（简称）：

这实际上取决于您目标网页的内容。如果大多数情况是静态的，并且只有很少的AngularJS绑定，则我同意，页面底部是最好的。但是，如果是全动态内容，则您希望[在头部]尽快加载AngularJS。

因此，如果您的内容大部分是通过Angular生成的，则ng-cloak只需将Angular包含在头部即可为您节省额外的CSS和指令。

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

— yerforkferchips
source

1

不必要。

请查看此http://plnkr.co/edit/zzt41VUgR332IV01KPsO?p=preview。角度js放置在页面底部的位置，如果将其放置在顶部，则仍呈现相同的输出。

— 拉杰卡马尔·苏伯拉曼人
source

2

谢谢。我知道它有效-我想我想知道这样做是否有任何后果，或者它是否因任何原因被Angular团队皱眉了。

— Cadriel

4

在使用Chrome的示例中，我仍然可以看到闪光灯。在主体上使用class =“ ng-cloak”，随后H1元素消除了模板标记的闪烁。

— 2014年

1

在页面底部加载Angular JS确实会产生难看的{{something}} HTML。在body标签中使用ng-cloak指令会创建一个空的闪存，直到加载JS为止，因此与仅在head元素中加载AngularJS相比，它没有任何好处。您可以在每个带有ng指令的元素中添加ng-cloak，但最终会出现空元素。如此，只需将Angular和您的app.js文件加载到head元素中，就像Angular文档在其文档中的引文中所建议的那样：“为获得最佳结果，必须将angular.js脚本加载到html文档的head部分中”

— 史蒂夫·凯里
source