AngularJS框架的ng-app指令与自动加载实现方法分析


Posted in Javascript onJanuary 04, 2017

本文实例分析了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程序设计有所帮助。

Javascript 相关文章推荐
鼠标图片振动代码
Jul 06 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
Mar 05 Javascript
ajax+jQuery实现级联显示地址的方法
May 06 Javascript
javascript格式化日期时间方法汇总
Jun 19 Javascript
jQuery自动完成插件completer附源码下载
Jan 04 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
Oct 14 Javascript
Angular的$http与$location
Dec 26 Javascript
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
JS中移除非数字最多保留一位小数
May 09 Javascript
详解在Javascript中进行面向切面编程
Apr 28 Javascript
vue elementUI 表单校验功能之数组多层嵌套
Jun 04 Javascript
js验证账户名是否重复
May 26 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
Jan 04 #Javascript
通过sails和阿里大于实现短信验证
Jan 04 #Javascript
jQuery实现手机上输入后隐藏键盘功能
Jan 04 #Javascript
AngularJS控制器controller给模型数据赋初始值的方法
Jan 04 #Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
Jan 04 #Javascript
微信小程序 石头剪刀布实例代码
Jan 04 #Javascript
使用JavaScript为一张图片设置备选路径的方法
Jan 04 #Javascript
You might like
php记录日志的实现代码
2011/08/08 PHP
WordPress的文章自动添加关键词及关键词的SEO优化
2016/03/01 PHP
php禁用cookie后session设置方法分析
2016/10/19 PHP
thinkPHP5.0框架引入Traits功能实例分析
2017/03/18 PHP
jquery复选框CHECKBOX全选、反选
2008/08/30 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
2010/12/28 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
JavaScript实现的双向跨域插件分享
2015/01/31 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
2016/06/08 Javascript
使用D3.js制作图表详解
2017/08/13 Javascript
详解使用路由延迟加载 Angular 模块
2017/10/12 Javascript
详解如何构建Promise队列实现异步函数顺序执行
2018/10/23 Javascript
详解如何理解vue的key属性
2019/04/14 Javascript
[04:03]DOTA2英雄梦之声_第02期_风暴之灵
2014/06/30 DOTA
[01:09:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第一场 6.2
2018/06/04 DOTA
Python判断文件和文件夹是否存在的方法
2015/05/21 Python
python @property的用法及含义全面解析
2018/02/01 Python
flask框架中勾子函数的使用详解
2018/08/01 Python
python 实现数字字符串左侧补零的方法
2018/12/04 Python
浅析Python与Mongodb数据库之间的操作方法
2019/07/01 Python
python ImageDraw类实现几何图形的绘制与文字的绘制
2020/02/26 Python
Python实现密钥密码(加解密)实例详解
2020/04/26 Python
python -v 报错问题的解决方法
2020/09/15 Python
关于pycharm 切换 python3.9 报错 ‘HTMLParser‘ object has no attribute ‘unescape‘ 的问题
2020/11/24 Python
详解通过变换矩阵实现canvas的缩放功能
2019/01/14 HTML / CSS
一个精品风格的世界:Atterley
2019/05/01 全球购物
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
旅游管理实习自我鉴定
2013/09/29 职场文书
酒店门卫岗位职责
2013/12/29 职场文书
临床护理求职信
2014/04/26 职场文书
人力资源求职信
2014/05/25 职场文书
作息时间调整通知
2015/04/22 职场文书
2015年小班保育员工作总结
2015/05/27 职场文书
create-react-app开发常用配置教程
2022/06/25 Javascript
Python 第三方库 openpyxl 的安装过程
2022/12/24 Python