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+WebService 校验账号是否已被注册的代码
Jul 12 Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
Jan 06 Javascript
formValidator3.3的ajaxValidator一些异常分析
Jul 12 Javascript
javascript返回顶部效果(自写代码)
Jan 06 Javascript
深入分析Javascript跨域问题
Apr 17 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
Sep 06 Javascript
JS功能代码集锦
May 04 Javascript
jquery把int类型转换成字符串类型的方法
Oct 07 Javascript
浅谈html转义及防止javascript注入攻击的方法
Dec 04 Javascript
基于Bootstrap分页的实例讲解(必看篇)
Jul 04 Javascript
element-ui中select组件绑定值改变,触发change事件方法
Aug 24 Javascript
vue中使用props传值的方法
May 08 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 高手之路(一)
2006/10/09 PHP
PHP接收json 并将接收数据插入数据库的实现代码
2015/12/01 PHP
解决 firefox 不支持 document.all的方法
2007/03/12 Javascript
EXT中xtype的含义分析
2010/01/07 Javascript
jQuery对象[0]是什么含义?
2010/07/31 Javascript
jquery live()调用不存在的解决方法
2014/02/26 Javascript
avascript中的自执行匿名函数应用示例
2014/09/15 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
2015/08/20 Javascript
javascript每日必学之继承
2016/02/23 Javascript
JS实现页面数据无限加载
2016/09/13 Javascript
浅谈Angular中ngModel的$render
2016/10/24 Javascript
利用VUE框架,实现列表分页功能示例代码
2017/01/12 Javascript
基于bootstrap实现收缩导航条
2017/03/17 Javascript
详解webpack进阶之插件篇
2017/07/06 Javascript
手把手教你使用vue-cli脚手架(图文解析)
2017/11/08 Javascript
vue.js使用v-if实现显示与隐藏功能示例
2018/07/06 Javascript
node.js学习笔记之koa框架和简单爬虫练习
2018/12/13 Javascript
js实现一个页面多个倒计时的3种方法
2019/02/25 Javascript
vue实现文件上传读取及下载功能
2020/11/17 Javascript
Python编程实现两个文件夹里文件的对比功能示例【包含内容的对比】
2017/06/20 Python
Python队列的定义与使用方法示例
2017/06/24 Python
用pycharm开发django项目示例代码
2019/06/13 Python
如何基于python操作json文件获取内容
2019/12/24 Python
在python中修改.properties文件的操作
2020/04/08 Python
CSS3中的Media Queries学习笔记
2016/05/23 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
2011/10/18 HTML / CSS
伯利陶器:Burleigh Pottery
2018/01/03 全球购物
商得四方公司面试题(gid+)
2014/04/30 面试题
电子商务专业学生的学习自我评价
2013/10/27 职场文书
中式餐厅创业计划书范文
2014/01/23 职场文书
心理咨询承诺书
2014/05/20 职场文书
2019销售早会主持词
2019/06/27 职场文书
创业计划书之家政服务
2019/09/18 职场文书
导游词之井冈山
2019/11/20 职场文书
MongoDB使用profile分析慢查询的步骤
2021/04/30 MongoDB