AngularJS in HEAD vs BODY
在所有AngularJS示例中,Angular库都放置在文档的HEAD标记中。我有一个基于HTML5 Boilerplate布局的现有项目。这定义了JS库应该放在DOM的最底部,然后放在</BODY>
标签之前。AngularJS in HEAD vs BODY
是否需要将AngularJS放置在HEAD中?
AngularJS不需要放在HEAD中,实际上你通常不应该,因为这会阻止加载HTML。
但是,当您在页面底部加载AngularJS时,您需要使用ng-cloak或ng-bind来避免“未编译内容的闪烁”。请注意,您只需在您的“index.html”页面上使用ng-cloak/ng-bind。在初始页面加载之后,当使用ng-include或ng-view或其他Angular结构来提取附加内容时,该内容将在Angular被显示之前编译。
鉴于'ng-cloak'样式规则(实际上是隐藏的)由angular.js文件添加,这是否仍然会提供未编译内容的闪光? – 2013-03-25 21:59:52
@StuCox,是的,但在上面引用的SO答案中,它显示了您可以包含哪些CSS样式以避免该问题。 – 2013-03-25 22:04:08
这似乎是一个非常奇怪的建议(即使它是官方的),看到你必须自己定义一个CSS规则,即使它会被脚本加载。冗余! 对于大多数Angular应用程序来说,在加载Angular之前加载的HTML实际上是有意义的 - 在没有Angular的情况下,body中的标记通常是无用的。 – yerforkferchips 2014-07-30 14:18:18
不一定。
请看看这个http://plnkr.co/edit/zzt41VUgR332IV01KPsO?p=preview。 其中角度js放置在页面的底部,并且如果将它放置在顶部,仍呈现相同的输出。
在谷歌论坛这一个答案给我完美的洞察力(缩短):
这真的取决于你的目标网页的内容。如果大部分 是静态的,只有少数AngularJS绑定比是的,我同意,页面底部是 是最好的。但是如果您想要在完全动态的 内容中加载AngularJS [头部]。
所以,如果在很大程度上是通过角生成你的内容,你会通过只包括头角保存自己额外的CSS和ng-cloak
指令。
https://groups.google.com/d/msg/angular/XTJFkQHjW5Y/pbSotoaqlkwJ
角加载JS在页面的底部,并导致难看的{{事}} HTML的闪光。在body标签中使用ng-cloak指令会创建一个空的flash,直到JS被加载,所以它不会比仅仅将AngularJS加载到head元素中增加任何好处。你可以添加ng-cloak给每个有ng指令的元素,但是你最终会得到一个空的元素。 Soooo,只需在Angular文档中引用Angular和你的app.js文件在head元素中就可以了:“为了获得最好的结果,angular.js脚本必须加载到html文档的head部分” “
”将脚本标记放置在页面底部将脚本标记放置在页面的末尾可以缩短应用程序加载时间,因为加载的angular.js脚本不会阻止HTML加载。 - [Bootstrap页面](http://docs.angularjs.org/guide/bootstrap) – 2013-03-21 02:24:24
对不起 - 我的措辞可能是关闭的。 ENDING正文标记之前的文档底部的脚本标记。 :) – Cadriel 2013-03-21 08:57:35
最好的做法是将脚本放在正文的底部。然而,如果你的整个站点是由角度驱动的,那么无论你是做头还是身体都没有关系,因为无论如何,直到所有脚本都执行完毕,内容才会加载。 – 2016-07-28 15:26:24