代码之家 › 专栏 › 技术社区 › Cadriel

AngularJS头部与身体

html5boilerplate angularjs

72

Cadriel · 技术社区 · 12 年前

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

AngularJS是否需要放置在HEAD中?

4 回复 | 直到 11 年前

1

77

Community CDub 7 年前

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

然而,当您在页面底部加载AngularJS时,您需要使用 ng-cloak 或 ng-bind 以避免“未编译内容的闪光”。请注意,您只需要在“index.html”页面上使用ng-calop/ng-bind。当在初始页面加载后使用ng-include或ng-view或其他Angular构造来引入额外的内容时,Angular将在显示该内容之前对其进行编译。

另请参阅 https://stackoverflow.com/a/14076004/215945

2

41

yerforkferchips 10 年前

谷歌群组上的这一回答让我有了完美的洞察力(简称):

这实际上取决于您登录页面的内容。如果大部分是静态的,只有很少的AngularJS绑定。是的,我同意页面底部是最好的。但在完全动态的情况下您想尽快加载AngularJS的内容[在标题中]。

因此,如果你的内容很大程度上是通过Angular生成的,你可以省去额外的CSS和 ng-cloak 指令,只需在头部包含Angular。

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

3

1

Rajkamal Subramanian 12 年前

不一定。

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

4

1

Steve Carey 8 年前

在页面底部加载Angular JS确实会导致出现难看的{{something}}html。在body标记中使用ng-caloft指令会创建一个空的flash,直到JS被加载,这样它就不会比在head元素中加载AngularJS增加任何好处。您可以将ng斗篷添加到每个包含ng指令的元素中,但最终会出现一堆空元素。Sooo,只需在head元素中加载Angular和你的app.js文件,正如Angular文档在其文档中引用的这句话所建议的那样:“为了获得最佳结果,Angular.js脚本必须加载在html文档的head部分。”