本文介绍了ng-app 指令的位置(html vs body)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我最近查看了一个用 angular 构建的 web 应用程序的代码，发现它是用放置在 <html> 标签上，这是 angular docs 此处、此处和在他们的教程中.
I recently reviewed the code for a webapp built with angular and found that it was written with the ng-app="myModule" directive placed on the <body> tag. When learning angular, I've only ever seen it used on the <html> tag, as recommended by the angular docs here, here, and in their tutorial.
我自己对此进行了一些探索，发现了一些问题，特别是 这个和类似的这个，讨论加载多个一个页面的模块.但是，这种技术与我的情况不同，因为它涉及将 ng-app 放在 主体内的元素上，并使用手动引导程序同时运行两个 Angular 应用程序.
I've explored this a bit on my own and found SO questions, notably this one and similarly this one, that discuss loading multiple modules for a page. However, this technique different from my case, as it involves placing ng-app on elements within the body and using manual bootstrapping to run two angular apps at the same time.
据我所知，在 上使用 ng-app 的应用在运行时没有区别..据我了解，ng-app 指定了一个 Angular 应用程序的根，因此将它放置在 ng-app 放在这些标签之一而不是另一个标签上有什么技术区别?
As far as I can tell, there is no difference at runtime between an app with ng-app on <html> or <body>. As I understand it, ng-app designates the root of an angular application, so placement of it on the <body> would cut <head> out of angular's scope, but I can't think of any major way this would affect things. So my question is: What are the technical difference between placing ng-app on one of these tags instead of the other?
推荐答案
ng-app 放在哪里没有太大区别.
There is no big difference where you put ng-app.
如果你把它放在 <body> 上，那么你的 AngularJS 范围更小，稍微更快.
If you put it on <body> then you have a smaller scope for AngularJS which is slightly faster.
但是我在 ng-app 来操作 </code>.<em class="showen"></em></p>
<p class="en">But I have used <code>ng-app</code> on the <code><html></code> for manipulating the <code><title></code>.</p>
<p>这篇关于ng-app 指令的位置(html vs body)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！</p>
</div>
<div class="arc-body-main-more">
<span onclick="unlockarc('2521877');">查看全文</span>
</div>
</div>
<div>
</div>
<div class="wwads-cn wwads-horizontal" data-id="166" style="max-width:100%;border: 4px solid #666;"></div>
</div>
</article>
<div id="arc-ad-2" class="mb-1">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5038752844014834"
data-ad-slot="3921941283"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class="widget bgwhite radius-1 mb-1 shadow widget-rel">
<h5>相关文章</h5>
<ul>
<li>
<a target="_blank" title="页面上的多个 ng-app 指令" href="/2523254.html">
页面上的多个 ng-app 指令;
</a>
</li>
<li>
<a target="_blank" title="页面上的多个 ng-app 指令" href="/2524789.html">
页面上的多个 ng-app 指令;
</a>
</li>
<li>
<a target="_blank" title="ng-app vs. data-ng-app，有什么区别?" href="/2520797.html">
ng-app vs. data-ng-app，有什么区别?;
</a>
</li>
<li>
<a target="_blank" title="Ng-app不是元素'HTML'的有效属性" href="/1111836.html">
Ng-app不是元素'HTML'的有效属性;
</a>
</li>
<li>
<a target="_blank" title="在NG-应用指令的位置（HTML VS体）" href="/193946.html">
在NG-应用指令的位置（HTML VS体）;
</a>
</li>
<li>
<a target="_blank" title="ngGrid 注入 ng-app 失败" href="/2532005.html">
ngGrid 注入 ng-app 失败;
</a>
</li>
<li>
<a target="_blank" title="ngGrid注入ng-app失败" href="/1928580.html">
ngGrid注入ng-app失败;
</a>
</li>
<li>
<a target="_blank" title="引导使用多个ng-app" href="/1927421.html">
引导使用多个ng-app;
</a>
</li>
<li>
<a target="_blank" title="ngGrid 注入 ng-app 失败" href="/2525757.html">
ngGrid 注入 ng-app 失败;
</a>
</li>
<li>
<a target="_blank" title="使用没有值的 ng-app" href="/2521252.html">
使用没有值的 ng-app;
</a>
</li>
<li>
<a target="_blank" title="AngularJS 中的 ng-app V/S data-ng-app" href="/2525316.html">
AngularJS 中的 ng-app V/S data-ng-app;
</a>
</li>
<li>
<a target="_blank" title="AngularJS中的ng-app V/S data-ng-app" href="/1927891.html">
AngularJS中的ng-app V/S data-ng-app;
</a>
</li>
<li>
<a target="_blank" title="为什么我的 ng-app 指令中的表单不提交(angularjs)?" href="/2523782.html">
为什么我的 ng-app 指令中的表单不提交(angularjs)?;
</a>
</li>
<li>
<a target="_blank" title="为什么我的 ng-app 指令中的表单不提交(angularjs)?" href="/2523789.html">
为什么我的 ng-app 指令中的表单不提交(angularjs)?;
</a>
</li>
<li>
<a target="_blank" title="AngularJS 页面内的多个 ng-app" href="/2520518.html">
AngularJS 页面内的多个 ng-app;
</a>
</li>
<li>
<a target="_blank" title="为什么在给定的 HTML 页面中不能有两个 ng-app 指令 - AngularJS?" href="/2523948.html">
为什么在给定的 HTML 页面中不能有两个 ng-app 指令 - AngularJS?;
</a>
</li>
<li>
<a target="_blank" title="为什么在给定的 HTML 页面中不能有两个 ng-app 指令 - AngularJS?" href="/2523988.html">
为什么在给定的 HTML 页面中不能有两个 ng-app 指令 - AngularJS?;
</a>
</li>
<li>
<a target="_blank" title="为什么 ng-class="ng-app"打破 AngularJS?" href="/2522737.html">
为什么 ng-class="ng-app"打破 AngularJS?;
</a>
</li>
<li>
<a target="_blank" title="为什么我不能在给定的HTML页面中有两个ng-app指令 - AngularJS？" href="/1025278.html">
为什么我不能在给定的HTML页面中有两个ng-app指令 - AngularJS？;
</a>
</li>
<li>
<a target="_blank" title="如何在RequireJs中使用ng-app？" href="/1026014.html">
如何在RequireJs中使用ng-app？;
</a>
</li>
<li>
<a target="_blank" title="页面加载后如何添加ng-app?" href="/1490121.html">
页面加载后如何添加ng-app?;
</a>
</li>
<li>
<a target="_blank" title="angular.js - angular多个ng-app ng-view问题" href="/712469.html">
angular.js - angular多个ng-app ng-view问题;
</a>
</li>
<li>
<a target="_blank" title="使用空字符串(“")作为 ng-app 的名称" href="/2525081.html">
使用空字符串(“")作为 ng-app 的名称;
</a>
</li>
<li>
<a target="_blank" title="如何将两个模块注册到ng-app?" href="/1927545.html">
如何将两个模块注册到ng-app?;
</a>
</li>
<li>
<a target="_blank" title="多个ng-app如何在angular中工作(为什么这样的行为?)" href="/1928586.html">
多个ng-app如何在angular中工作(为什么这样的行为?);
</a>
</li>
</ul>
</div>
<div class="mb-1">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5038752844014834"
data-ad-slot="3921941283"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<div class="side">
<div class="widget widget-side bgwhite mb-1 shadow">
<h5>其他开发最新文章</h5>
<ul>
<li>
<a target="_blank" title="拒绝显示一个框架，因为它将'X-Frame-Options'设置为'sameorigin'" href="/893060.html">
拒绝显示一个框架，因为它将'X-Frame-Options'设置为'sameorigin';
</a>
</li>
<li>
<a target="_blank" title="什么是＆QUOT; AW＆QUOT;在部分标志属性是什么意思？" href="/303988.html">
什么是＆QUOT; AW＆QUOT;在部分标志属性是什么意思？;
</a>
</li>
<li>
<a target="_blank" title="在运行npm install命令时获取'npm WARN弃用'警告" href="/840917.html">
在运行npm install命令时获取'npm WARN弃用'警告;
</a>
</li>
<li>
<a target="_blank" title="cmake无法找到openssl" href="/516280.html">
cmake无法找到openssl;
</a>
</li>
<li>
<a target="_blank" title="从Spark的scala中的* .tar.gz压缩文件中读取HDF5文件" href="/850628.html">
从Spark的scala中的* .tar.gz压缩文件中读取HDF5文件;
</a>
</li>
<li>
<a target="_blank" title="Twitter :: Error :: Forbidden - 无法验证您的凭据" href="/630061.html">
Twitter :: Error :: Forbidden - 无法验证您的凭据;
</a>
</li>
<li>
<a target="_blank" title="我什么时候需要一个fb：app_id或者fb：admins？" href="/747981.html">
我什么时候需要一个fb：app_id或者fb：admins？;
</a>
</li>
<li>
<a target="_blank" title="将.db文件导入R" href="/902960.html">
将.db文件导入R;
</a>
</li>
<li>
<a target="_blank" title="npm通知创建一个lockfile作为package-lock.json。你应该提交这个文件" href="/744854.html">
npm通知创建一个lockfile作为package-lock.json。你应该提交这个文件;
</a>
</li>
<li>
<a target="_blank" title="拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script-src'self'”" href="/819167.html">
拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script-src'self'”;
</a>
</li>
</ul>
</div>
<div class="widget widget-side bgwhite mb-1 shadow">
<h5>
热门教程
</h5>
<ul>
<li>
<a target="_blank" title="Java教程" href="/OnLineTutorial/java/index.html">
Java教程
</a>
</li>
<li>
<a target="_blank" title="Apache ANT 教程" href="/OnLineTutorial/ant/index.html">
Apache ANT 教程
</a>
</li>
<li>
<a target="_blank" title="Kali Linux教程" href="/OnLineTutorial/kali_linux/index.html">
Kali Linux教程
</a>
</li>
<li>
<a target="_blank" title="JavaScript教程" href="/OnLineTutorial/javascript/index.html">
JavaScript教程
</a>
</li>
<li>
<a target="_blank" title="JavaFx教程" href="/OnLineTutorial/javafx/index.html">
JavaFx教程
</a>
</li>
<li>
<a target="_blank" title="MFC 教程" href="/OnLineTutorial/mfc/index.html">
MFC 教程
</a>
</li>
<li>
<a target="_blank" title="Apache HTTP客户端教程" href="/OnLineTutorial/apache_httpclient/index.html">
Apache HTTP客户端教程
</a>
</li>
<li>
<a target="_blank" title="Microsoft Visio 教程" href="/OnLineTutorial/microsoft_visio/index.html">
Microsoft Visio 教程
</a>
</li>
</ul>
</div>
<div class="widget widget-side bgwhite mb-1 shadow">
<h5>
热门工具
</h5>
<ul>
<li>
<a target="_blank" title="Java 在线工具" href="/Onlinetools/details/4">
Java 在线工具
</a>
</li>
<li>
<a target="_blank" title="C(GCC) 在线工具" href="/Onlinetools/details/6">
C(GCC) 在线工具
</a>
</li>
<li>
<a target="_blank" title="PHP 在线工具" href="/Onlinetools/details/8">
PHP 在线工具
</a>
</li>
<li>
<a target="_blank" title="C# 在线工具" href="/Onlinetools/details/1">
C# 在线工具
</a>
</li>
<li>
<a target="_blank" title="Python 在线工具" href="/Onlinetools/details/5">
Python 在线工具
</a>
</li>
<li>
<a target="_blank" title="MySQL 在线工具" href="/Onlinetools/Dbdetails/33">
MySQL 在线工具
</a>
</li>
<li>
<a target="_blank" title="VB.NET 在线工具" href="/Onlinetools/details/2">
VB.NET 在线工具
</a>
</li>
<li>
<a target="_blank" title="Lua 在线工具" href="/Onlinetools/details/14">
Lua 在线工具
</a>
</li>
<li>
<a target="_blank" title="Oracle 在线工具" href="/Onlinetools/Dbdetails/35">
Oracle 在线工具
</a>
</li>
<li>
<a target="_blank" title="C++(GCC) 在线工具" href="/Onlinetools/details/7">
C++(GCC) 在线工具
</a>
</li>
<li>
<a target="_blank" title="Go 在线工具" href="/Onlinetools/details/20">
Go 在线工具
</a>
</li>
<li>
<a target="_blank" title="Fortran 在线工具" href="/Onlinetools/details/45">
Fortran 在线工具
</a>
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">var eskeys = 'ng-app,指令,的,位置,html,vs,body'; var cat = 'cc';';//other-dev</script>
</div>
<div id="pop" onclick="pophide();">
<div id="pop_body" onclick="event.stopPropagation();">
<h6 class="flex flex101">
登录
<span onclick="pophide();">关闭</span>
</h6>
<div class="pd-1">
<div class="wxtip center">
<span>扫码关注<em>1秒</em>登录</span>
</div>
<div class="center">
<img id="qr" src="https://huajiakeji.com/Content/Images/qrydx.jpg" alt="" style="width:150px;height:150px;" />
</div>
<div style="margin-top:10px;display:flex;justify-content: center;">
<input type="text" placeholder="输入验证码" id="txtcode" autocomplete="off" />
<input id="btngo" type="button" onclick="chk()" value="GO" />
</div>
<div class="center" style="margin: 4px; font-size: .8rem; color: #f60;">
发送“验证码”获取
<em style="padding: 0 .5rem;">|</em>
<span style="color: #01a05c;">15天全站免登陆</span>
</div>
<div id="chkinfo" class="tip"></div>
</div>
</div>
</div> <script type="text/javascript" src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/highlight.min.js"></script>
<script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/base.js?v=0.22"></script>
<script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/tui.js?v=0.11"></script>
<footer class="footer">
<div class="container">
<div class="flink mb-1">
友情链接：
<a href="https://www.it1352.com/" target="_blank">IT屋</a>
<a href="https://huajiakeji.com/" target="_blank">Chrome插件</a>
<a href="https://www.cnplugins.com/" target="_blank">谷歌浏览器插件</a>
</div>
<section class="copyright-section">
<a href="https://www.it1352.com" title="IT屋-程序员软件开发技术分享社区">IT屋</a>
©2016-2022 <a href="http://www.beian.miit.gov.cn/" target="_blank">琼ICP备2021000895号-1</a>
<a href="/sitemap.html" target="_blank" title="站点地图">站点地图</a>
<a href="/Home/Tags" target="_blank" title="站点标签">站点标签</a>
<a target="_blank" alt="sitemap" href="/sitemap.xml">SiteMap</a>
<a href="/1155981.html" title="IT屋-免责申明"><免责申明></a>
本站内容来源互联网,如果侵犯您的权益请联系我们删除.
</section>
<!--统计代码-->
<script type="text/javascript">
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?0c3a090f7b3c4ad458ac1296cb5cc779";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<script type="text/javascript">
(function () {
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
</div>
</footer>
</body>
</html>
