头部与身体中的 AngularJS答案

【问题标题】：AngularJS in HEAD vs BODY头部与身体中的 AngularJS
【发布时间】：2013-03-10 09:47:25
【问题描述】：

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

AngularJS 需要放在 HEAD 中吗？

【问题讨论】：

"将脚本标签放在页面底部。将脚本标签放在页面末尾可以缩短应用程序加载时间，因为加载 angular.js 脚本不会阻止 HTML 加载。" -- Bootstrap page
对不起 - 我的措辞可能是错误的。 ENDING 正文标记之前的文档底部的脚本标记。 :)
最佳做法是按照您所说的将脚本放在正文的底部。但是，如果您的整个网站都是由 angular 驱动的，那么无论您使用 head 还是 body 都无关紧要，因为在所有脚本都执行完之前，内容不会加载。

【解决方案1】：

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

【讨论】：

鉴于 ng-cloak 样式规则（实际上是隐藏的）是由 angular.js 文件添加的，这不会仍然会出现未编译的内容吗？
@StuCox，是的，但是在我上面引用的 SO 答案中，它显示了您可以包含哪些 CSS 样式以避免出现问题。
这似乎是一个非常奇怪的建议（即使它是官方的），因为你必须自己定义一个 CSS 规则，即使它会被脚本加载。冗余！对于大多数 Angular 应用程序，在加载 Angular 之前不加载 HTML 实际上是有意义的 - 无论如何，如果没有 Angular，正文中的标记通常是无用的。

【解决方案2】：

Google Groups 上的这个答案给了我完美的见解（缩短）：

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

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

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

【讨论】：

【解决方案3】：

不一定。

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

【讨论】：

谢谢。我知道它有效 - 我想我想知道这样做是否会产生任何后果，或者 Angular 团队是否出于任何原因对此表示不满。
在那个使用 Chrome 的例子中，我仍然有一个闪光灯。在 body 上使用 class="ng-cloak"，后来 H1 元素消除了模板标记的闪烁。

【解决方案4】：

在页面底部加载 Angular JS 确实会导致一闪而过的丑陋 {{ something }} html。在 body 标记中使用 ng-cloak 指令会在加载 JS 之前创建一个空的 flash，因此与仅在 head 元素中加载 AngularJS 相比，它不会增加任何好处。您可以将 ng-cloak 添加到每个带有 ng 指令的元素中，但最终会得到一闪而过的空元素。 Soooo，只需将 Angular 和您的 app.js 文件加载到 head 元素中，正如 Angular 文档在其文档中的引用中所建议的那样：“为了获得最佳结果，必须将 angular.js 脚本加载到 html 文档的 head 部分”

【讨论】：