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 相关文章推荐
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
Apr 27 Javascript
jQuery数据显示插件整合实现代码
Oct 24 Javascript
javascript面向对象特性代码实例
Jun 12 Javascript
深入解析JavaScript中的立即执行函数
May 21 Javascript
jquery获取input type=text中的值的各种方式(总结)
Dec 02 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
Dec 14 Javascript
AngularJS日程表案例详解
Aug 15 Javascript
详解微信小程序Page中data数据操作和函数调用
Sep 27 Javascript
r.js来合并压缩css文件的示例
Apr 26 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
May 16 Javascript
p5.js实现故宫橘猫赏秋图动画
Oct 23 Javascript
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
微信小程序 解决请求服务器手机预览请求不到数据的方法
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者的疑难问答(2)
2006/10/09 PHP
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
如何使用微信公众平台开发模式实现多客服
2016/01/06 PHP
JavaScript继承方式实例
2010/10/29 Javascript
jQuery制作仿腾讯web qq用户体验桌面
2013/08/20 Javascript
jQuery中removeClass()方法用法实例
2015/01/05 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
2016/05/17 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
通过JS获取Request.QueryString()参数的值实现方法
2016/09/27 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
2017/01/13 Javascript
Node.js中sequelize时区的配置方法
2017/12/10 Javascript
angular1配合gulp和bower的使用教程
2018/01/19 Javascript
使用validate.js实现表单数据提交前的验证方法
2018/09/04 Javascript
原生JS实现随机点名项目的实例代码
2019/04/30 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
2019/05/18 Javascript
Python自动连接ssh的方法
2015/03/07 Python
梅尔倒谱系数(MFCC)实现
2019/06/19 Python
Django url,从一个页面调到另个页面的方法
2019/08/21 Python
Python实现微信机器人的方法
2019/09/06 Python
Django关于admin的使用技巧和知识点
2020/02/10 Python
python实现飞船游戏的纵向移动
2020/04/24 Python
如何理解python对象
2020/06/21 Python
如何用Python绘制3D柱形图
2020/09/16 Python
HTML5 Canvas的事件处理介绍
2015/04/24 HTML / CSS
HTML5新增加标签和功能概述
2016/09/05 HTML / CSS
澳大利亚首屈一指的在线购物目的地:Kogan.com
2017/02/02 全球购物
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
十佳班主任事迹材料
2014/01/18 职场文书
大学生职业生涯规划范文
2014/01/22 职场文书
军神教学反思
2014/02/04 职场文书
工作岗位说明书模板
2014/05/09 职场文书
党的群众路线教育实践活动个人对照检查材料(四风)
2014/11/05 职场文书
领导欢迎词致辞
2015/01/23 职场文书
情人节活动总结范文
2015/02/05 职场文书
my.ini优化mysql数据库性能的十个参数(推荐)
2021/05/26 MySQL
Spring Data JPA框架自定义Repository接口
2022/04/28 Java/Android