AngularJS框架的ng-app指令与自动加载实现方法分析
更新时间：2017年01月04日 10:57:22 作者：aitangyong
这篇文章主要介绍了AngularJS框架的ng-app指令与自动加载实现方法,结合实例形式分析了ng-app指令的功能及自动加载机制的实现技巧,需要的朋友可以参考下
本文实例分析了AngularJS框架的ng-app指令与自动加载实现方法。分享给大家供大家参考，具体如下：
ng-app是angular的一个指令，代表一个angular应用（也叫模块）。使用ng-app或ng-app=""来标记一个DOM结点，让框架会自动加载。也就是说，ng-app是可以带属性值的。如果想要实现自动加载，那么就不能让ng-app带有属性值。
<html>
<body ng-app>
<div>div1:{{1+3*2}}</div>
<script src="angular.js"></script>
</body>
</html>
1、不含ng-app，无法自动加载，这个比较好理解。
<html>
<body>
<div>div1:{{1+3*2}}</div>
<script src="angular.js"></script>
</body>
</html>
2、含有2个ng-app，那么只会自动加载第一个，这个也好理解。
<html>
<body>
<div ng-app>div1:{{1+3*2}}</div>
<div ng-app>div2:{{1+3*2}}</div>
<script src="angular.js"></script>
</body>
</html>
3、ng-app带有属性，不能自动加载
<html>
<body>
<div ng-app="app1">div1:{{1+3*2}}</div>
<script src="angular.js"></script>
</body>
</html>
4、不带属性的在前，带属性的在后。ng-app标记的模块可以自动加载
<html>
<body>
<div ng-app>div1:{{1+3*2}}</div>
<div ng-app="app1">div1:{{1+3*2}}</div>
<script src="angular.js"></script>
</body>
</html>
5、带属性的在前，不带属性的在后。ng-app标记的模块不能自动加载
<html>
<body>
<div ng-app="app1">div1:{{1+3*2}}</div>
<div ng-app>div1:{{1+3*2}}</div>
<script src="angular.js"></script>
</body>
</html>
第4和5两种情况很奇怪，不应该有这种顺序的区别，也没有必要这样区分，猜测应该是框架的bug。有人明白的话，欢迎指教。
更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
相关文章
这篇文章主要给大家介绍了关于AngularJs用户输入动态模板XSS攻击的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用angularjs具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2018-04-04
基于angular中的重要指令详解($eval,$parse和$compile)
下面小编就为大家带来一篇基于angular中的重要指令详解($eval,$parse和$compile)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
这篇文章主要为大家介绍了Angular 与 Component store实践示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
angular2+node.js express打包部署的实战
本篇文章主要介绍了angular2+node.js express打包部署的实战，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
在本教程中,您使用 Flex 布局与 Angular 应用程序,它允许您构建一个布局,使用预配置的 Flexbox CSS 样式,而无需额外的样式,对Angular使用 Flex 布局相关知识感兴趣的朋友跟随小编一起看看吧2024-02-02
不知道大家有没有发现在用AngularJS作为前端搭建个人博客的时候，发现用AngularJs输出html的时候，浏览器并不解析这些html标签，这里我们需要其显示angular输出的html能被浏览器解析怎么办呢？不知道Angularjs如何实现这种功能的通过这篇文章来看看吧。2016-09-09
angular6根据environments配置文件更改开发所需要的环境的方法
这篇文章主要介绍了angular6根据environments配置文件更改开发所需要的环境的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
在我们创建一个angularJS应用的时候，菜单往往往是不可或缺的元素之一。接下来通过本文给大家介绍AngularJS动态菜单操作指令，感兴趣的朋友一起学习吧2017-04-04
本文给大家介绍使用Angularjs实现多个页面共享数据的方式，通过定义一个共享服务service来实现此功能，对angularjs共享数据相关知识感兴趣的朋友一起学习2016-03-03
Angular是Google开发的一款浏览器端的高人气JavaScript框架,Angular 经常会被用到后台和管理工具的开发，这两类都会需要对用户进行鉴权。而鉴权的第一步，就是进行身份验证。本文详细介绍了Angular开发中的登陆与身份验证。2016-07-07
最新评论