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 相关文章推荐
用js的for循环获取radio选中的值
Oct 21 Javascript
js中同步与异步处理的方法和区别总结
Dec 25 Javascript
微信分享的标题、缩略图、连接及描述设置方法
Oct 14 Javascript
JavaScript检测并限制复选框选中个数的方法
Aug 12 Javascript
jQuery中cookie插件用法实例分析
Dec 04 Javascript
javascript执行环境及作用域详解
May 05 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
Feb 19 Javascript
JS判断一个数是否是水仙花数
Jun 11 Javascript
vue加载自定义的js文件方法
Mar 13 Javascript
vue-router+nginx 非根路径配置方法
Jun 30 Javascript
MockJs结合json-server模拟后台数据
Aug 26 Javascript
基于Vue 撸一个指令实现拖拽功能
Oct 09 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动态输出JavaScript代码实例
2015/02/12 PHP
Zend Framework教程之路由功能Zend_Controller_Router详解
2016/03/07 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
PHP中命名空间的使用例子
2019/03/22 PHP
跨浏览器的设置innerHTML方法
2006/09/18 Javascript
js控制表单操作的常用代码小结
2013/08/15 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
2016/04/14 Javascript
js 上传文件预览的简单实例
2016/08/16 Javascript
Javascript 6里的4个新语法
2016/08/25 Javascript
关于webpack代码拆分的解析
2017/07/20 Javascript
vux uploader 图片上传组件的安装使用方法
2018/05/15 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
2018/05/27 Javascript
使用D3.js构建实时图形的示例代码
2018/08/28 Javascript
vue文件运行的方法教学
2019/02/12 Javascript
javascript实现前端input密码输入强度验证
2020/06/24 Javascript
jQuery实现可以计算进制转换的计算器
2020/10/19 jQuery
在JavaScript中查找字符串中最长单词的三种方法(推荐)
2021/01/18 Javascript
[03:38]TI4西雅图DOTA2前线报道 71专访
2014/07/08 DOTA
numpy.ndarray 交换多维数组(矩阵)的行/列方法
2018/08/02 Python
解决Python运行文件出现out of memory框的问题
2018/12/03 Python
python Django编写接口并用Jmeter测试的方法
2019/07/31 Python
django实现类似触发器的功能
2019/11/15 Python
浅析关于Keras的安装(pycharm)和初步理解
2020/10/23 Python
浅析Python模块之间的相互引用问题
2021/02/26 Python
多媒体编辑专业毕业生推荐信
2013/11/05 职场文书
商务英语本科生的自我评价分享
2013/11/15 职场文书
创伤外科专业推荐信范文
2013/11/19 职场文书
秘书专业自荐信范文
2013/12/26 职场文书
辅导员评语
2014/05/04 职场文书
党员群众路线教育实践活动剖析材料
2014/10/10 职场文书
2015入党自传书范文
2015/06/26 职场文书
2016年领导干部正风肃纪心得体会
2015/10/09 职场文书
2015小学新教师个人工作总结
2015/10/14 职场文书
老舍《猫》教学反思
2016/02/17 职场文书
Redis集群新增、删除节点以及动态增加内存的方法
2021/09/04 Redis