AngularJS in HEAD vs BODY

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

是否需要将AngularJS放置在HEAD中？

来源

2013-03-21 Cadriel

”将脚本标记放置在页面底部将脚本标记放置在页面的末尾可以缩短应用程序加载时间，因为加载的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

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

来源

2013-03-21 14:44:36

鉴于'ng-cloak'样式规则（实际上是隐藏的）由angular.js文件添加，这是否仍然会提供未编译内容的闪光？ – 2013-03-25 21:59:52

@StuCox，是的，但在上面引用的SO答案中，它显示了您可以包含哪些CSS样式以避免该问题。 – 2013-03-25 22:04:08

+13

这似乎是一个非常奇怪的建议（即使它是官方的），看到你必须自己定义一个CSS规则，即使它会被脚本加载。冗余！对于大多数Angular应用程序来说，在加载Angular之前加载的HTML实际上是有意义的 - 在没有Angular的情况下，body中的标记通常是无用的。 – yerforkferchips 2014-07-30 14:18:18

不一定。

请看看这个http://plnkr.co/edit/zzt41VUgR332IV01KPsO?p=preview。其中角度js放置在页面的底部，并且如果将它放置在顶部，仍呈现相同的输出。

来源

2013-03-21 02:20:55 rajkamal

谢谢。我知道它是有效的 - 我想我想知道这样做是否有任何后果，或者如果Angular团队出于任何原因对其产生了不满。 – Cadriel 2013-03-21 08:59:03

在使用Chrome的示例中，我仍然有一个Flash。在body上使用class =“ng-cloak”，然后H1元素消除了模板标记的闪烁。 – Fred 2014-01-08 04:41:22

在谷歌论坛这一个答案给我完美的洞察力（缩短）：

这真的取决于你的目标网页的内容。如果大部分是静态的，只有少数AngularJS绑定比是的，我同意，页面底部是是最好的。但是如果您想要在完全动态的内容中加载AngularJS [头部]。

所以，如果在很大程度上是通过角生成你的内容，你会通过只包括头角保存自己额外的CSS和ng-cloak指令。

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

来源

2014-07-31 13:34:00 yerforkferchips

角加载JS在页面的底部，并导致难看的{{事}} HTML的闪光。在body标签中使用ng-cloak指令会创建一个空的flash，直到JS被加载，所以它不会比仅仅将AngularJS加载到head元素中增加任何好处。你可以添加ng-cloak给每个有ng指令的元素，但是你最终会得到一个空的元素。 Soooo，只需在Angular文档中引用Angular和你的app.js文件在head元素中就可以了：“为了获得最好的结果，angular.js脚本必须加载到html文档的head部分” “

来源

2016-09-01 22:28:51

AngularJS in HEAD vs BODY

回答

相关问题