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 相关文章推荐
jQuery ui1.7 dialog只能弹出一次问题
Aug 27 Javascript
JavaScript 的继承
Oct 01 Javascript
鼠标拖动实现DIV排序示例代码
Oct 14 Javascript
动态添加option及createElement使用示例
Jan 26 Javascript
Javascript Objects详解
Sep 04 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
Nov 23 Javascript
JavaScript控制网页层收起和展开效果的方法
Apr 15 Javascript
Jquery ajax基础教程
Nov 20 Javascript
js实现文字垂直滚动和鼠标悬停效果
Dec 31 Javascript
Vue.use源码分析
Apr 22 Javascript
vue中v-model动态生成的实例详解
Oct 27 Javascript
利用layer实现表单完美验证的方法
Sep 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文件上传的简单实例
2013/10/19 PHP
PHP动态生成指定大小随机图片的方法
2016/03/25 PHP
PHP实现单条sql执行多个数据的insert语句方法
2019/10/11 PHP
prototype 中文参数乱码解决方案
2009/11/09 Javascript
javascript动态加载三
2012/08/22 Javascript
jQuery 追加元素的方法如append、prepend、before
2014/01/16 Javascript
jQuery实现动画效果的简单实例
2014/01/27 Javascript
jQuery响应enter键的实现思路
2014/04/18 Javascript
JS与jQ读取xml文件的方法
2015/12/08 Javascript
详解javascript事件冒泡
2016/01/09 Javascript
谈一谈javascript闭包
2016/01/28 Javascript
JSONP原理及简单实现
2016/06/08 Javascript
JS实现颜色梯度与渐变效果完整实例
2016/12/30 Javascript
node.js学习之断言assert的使用示例
2017/09/28 Javascript
快速处理vue渲染前的显示问题
2018/03/05 Javascript
微信小程序通过一个json实现分享朋友圈图片
2019/09/03 Javascript
ElementUI 修改默认样式的几种办法(小结)
2020/07/29 Javascript
[02:31]2014DOTA2国际邀请赛2009专访:干爹表现出乎意料 看好DK杀回决赛
2014/07/20 DOTA
Python使用Scrapy爬取妹子图
2015/05/28 Python
关于Python 3中print函数的换行详解
2017/08/08 Python
python文件名和文件路径操作实例
2017/09/29 Python
使用Python 自动生成 Word 文档的教程
2020/02/13 Python
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
python实现感知机模型的示例
2020/09/30 Python
Python通过Schema实现数据验证方式
2020/11/12 Python
详解CSS3:overflow属性
2020/11/17 HTML / CSS
阿迪达斯奥地利官方商城:adidas.at
2016/10/16 全球购物
jurlique茱莉蔻英国官网:澳洲天然护肤品
2018/08/03 全球购物
Three Graces London官网:英国奢侈品牌
2021/03/18 全球购物
师范院校学生自荐信范文
2013/12/27 职场文书
战友聚会策划方案
2014/06/13 职场文书
法人委托书
2014/07/31 职场文书
培训计划通知
2015/07/15 职场文书
三八妇女节致辞
2015/07/31 职场文书
2016年村干部公开承诺书(公开承诺事项)
2016/03/25 职场文书
应届毕业生的自我评价
2019/06/21 职场文书