ng-app指令的位置（html与正文）

103

我最近查看了使用angular构建的webapp的代码，发现它是使用ng-app="myModule"放置在<body>标签上的指令编写的。在学习angular时，我只看过它在<html>tag上使用，正如这里，此处和其教程中的角度文档所推荐的那样。

我自己进行了一些探索，并发现了SO问题，尤其是这个问题，同样也是这个问题，该问题讨论了如何为页面加载多个模块。但是，这种技术与我的情况不同，因为它涉及将ng-app放置在体内的元素上，并使用手动引导程序同时运行两个有角度的app。

据我所知，使用ng-appon <html>或的应用程序在运行时没有区别<body>。据我了解，它ng-app指定了角度应用程序的根，因此将其放置在角度应用程序上<body>会<head>超出角度的范围，但是我想不到这会影响事物的任何主要方式。所以我的问题是：放在ng-app这些标签中的一个而不是另一个上的技术区别是什么？

angularjs

— 马特·戴维斯
source

Answers:

144

您放置的位置没有太大差异ng-app。

如果戴上它，<body>那么AngularJS的作用域会更小，速度会稍快一些。

不过，我已经使用ng-app上<html>的操纵<title>。

— 哈拉兰·杜波夫（Haralan Dobrev）
source

感谢你的回答！这基本上是我要得出的结论，因此很高兴听到其他人也在沿着同样的思路思考。我很想知道为什么它会更快，以及它可能快多少，您是否能够解释得更多，或者是否有任何参考资料可以说明这一点？

— MattDavis

我真的是稍快。这是最小的。较小的范围意味着AngularJS在其中查找指令的元素更少。例如，如果您有大量用于“开放图”的元元素，则可能会产生很小的影响。

— Haralan Dobrev

标题。那是真正的原因。

— ahnbizcad 2014年

我只是用普通的javascript来更改标题。

— Sean_A91 '16

@ Sean_A91如果整个页面都由AngularJS运行，那么使用Angular则更有意义。它更加一致，从而提高了可维护性，并且您还可以在页面正文中重用标题模型。

— Haralan Dobrev

我在一个团队中处理旧版应用程序，发现最好在div中使用ng-app标签，该标签用作包装程序以将新代码与旧版代码隔离。

我们在开发严重依赖jqGrid和Dojo的应用程序时发现了这一点。

当我们将ng-app添加到head标签时，它炸毁了网站，但是当我们使用包装器时，可以毫无问题地使用Angular。

— 彼得·德林南
source

这是一个很好的示例，其中我区分了Angular的三个用例：“单页应用”，“独立”（即接管页面，但使用指向其他页面的常规链接）和“ mixin”（即，这一页）。您已经精确描述了mixin的用法，在这种情况下，完全同意的ng-app应该仅在mixin适用的div上。但是，对于独立使用或SPA使用，我认为应该在<html>上。

— fool4jesus 2014年

@ fool4jesus您是否碰巧知道有关Angular不同用法选项的文章？当然，推荐的SPA版本有很多，但是最近我不得不将Angular添加到jQuery繁重的代码库中，并且想知道在这里成功使用它而不发疯的最佳选择是什么。

— Senthe

@Senthe可能很棘手。正如您已经发现的那样，Angular喜欢负责自己的DOMain。我认为这与页面的重叠区域无关，而与该区域的控制有关。也就是说，您仍然可以在有角度的区域中使用jquery，但是从有角度的代码开始-如果页面已经存在，这并不容易！换句话说，并不是必须要进行jquery调用，就像<script>标记之间的内容必须移入有角度的构造中一样-控制器和指令。这有任何意义吗？

— fool4jesus

AngularJS将引导它找到的第一个ng-app！而已。如果您有多个ng-app，它将仅处理第一个。如果要引导其他任何元素，请使用angular.bootstrap（）

ng-app属性的值是使用以下命令创建的模块：

angular.module("module_name", [])

模块定义了角度将如何引导，因为我们没有像其他编程语言一样具有main（）方法。如果ng-app的值为空，则默认使用默认模块'ng'。

据说速度稍快，因为angular会处理ng-app所在元素内的所有元素。但是我对此稍有怀疑，因为除非您的DOM非常庞大，否则差异几乎不会被注意到。

如果您想在此处查看示例，请访问：http : //noypi-linux.blogspot.com/2014/07/angularjs-tutorials-understanding.html

— 诺皮·吉拉斯（Noypi Gilas）
source