ng-app指令的放置(html vs body)

时间:2013-04-03 14:39:59

标签: angularjs

我最近审核了使用angular构建的webapp的代码,发现它是使用ng-app="myModule"标记上的<body>指令编写的。在学习角度时,我只会在<html>标记上看到它,正如角度文档herehere以及tutorial中所建议的那样。

我自己对此进行了一些探索,发现了SO问题,特别是this one和类似this one,它们讨论了为页面加载多个模块的问题。但是,这种技术与我的情况不同,因为它涉及将ng-app放置在 主体内的元素上,并使用手动引导来同时运行两个角度应用程序。

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

3 个答案:

答案 0 :(得分:144)

您放置ng-app的位置没有太大区别。

如果你把它放在<body>上,那么AngularJS的范围就会更小,稍微更快。

但我在ng-app上使用了<html>来操纵<title>

答案 1 :(得分:21)

我参与了一个处理遗留应用程序的团队,并发现最好在div中使用ng-app标记,该div用作包装器以将新代码与遗留代码隔离开来。

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

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

答案 2 :(得分:4)

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