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 相关文章推荐
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 03 Javascript
jQuery实现表格行上下移动和置顶效果
Jun 05 Javascript
javascript 闭包详解
Jul 02 Javascript
手机端转盘抽奖代码分享
Sep 10 Javascript
动态加载JavaScript文件的两种方法
Apr 22 Javascript
原生js实现放大镜
Feb 20 Javascript
jQuery表格(Table)基本操作实例分析
Mar 10 Javascript
Bootstrap一款超好用的前端框架
Sep 25 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
Mar 01 Javascript
mock.js实现模拟生成假数据功能示例
Jan 15 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
Aug 08 Javascript
js实现图片无缝循环轮播
Oct 28 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 URL编码解码函数代码
2009/03/10 PHP
php_xmlhttp 乱码问题解决方法
2009/08/07 PHP
PHP防止表单重复提交的几种常用方法汇总
2014/08/19 PHP
一不小心就做错的JS闭包面试题
2015/11/25 Javascript
Jqgrid之强大的表格插件应用
2015/12/02 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
2016/06/24 Javascript
使用React实现轮播效果组件示例代码
2016/09/05 Javascript
node vue项目开发之前后端分离实战记录
2017/12/13 Javascript
修改node.js默认的npm安装目录实例
2018/05/15 Javascript
AngularJS发送异步Get/Post请求方法
2018/08/13 Javascript
在 Vue.js中优雅地使用全局事件的方法
2019/02/01 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
node.js 如何监视文件变化
2020/09/01 Javascript
vue+echarts实现动态折线图的方法与注意
2020/09/01 Javascript
JavaScript 声明私有变量的两种方式
2021/02/05 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
2021/02/25 Javascript
[07:26]2015国际邀请赛第二日TOP10集锦
2015/08/06 DOTA
[03:11]TI9战队档案 - Alliance
2019/08/20 DOTA
python从sqlite读取并显示数据的方法
2015/05/08 Python
Python使用Selenium模块实现模拟浏览器抓取淘宝商品美食信息功能示例
2018/07/18 Python
浅谈python写入大量文件的问题
2018/11/09 Python
Python 文本文件内容批量抽取实例
2018/12/10 Python
python Gunicorn服务器使用方法详解
2019/07/22 Python
python 实现多维数组(array)排序
2020/02/28 Python
Python文件时间操作步骤代码详解
2020/04/13 Python
Python实现数字的格式化输出
2020/08/01 Python
Python读取多列数据以及用matplotlib制作图表方法实例
2020/09/23 Python
小学生自我鉴定
2013/10/12 职场文书
结婚邀请函范文
2014/01/14 职场文书
食品安全检查制度
2014/02/03 职场文书
40岁生日感言
2014/02/15 职场文书
法律顾问服务方案
2014/05/15 职场文书
2014年冬季防火方案
2014/05/21 职场文书
Python中else的三种使用场景
2021/06/16 Python
如何通过简单的代码描述Angular父组件、子组件传值
2022/04/07 Javascript
mysql 获取相邻数据项
2022/05/11 MySQL