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 each函数的链式调用
Jul 22 Javascript
Javascript 继承机制的实现
Aug 12 Javascript
JavaScript中prototype为对象添加属性的误区介绍
Oct 15 Javascript
页面加载完毕后滚动条自动滚动一定位置
Feb 20 Javascript
JS判断变量是否为空判断是否null
Jul 25 Javascript
node.js中的fs.readlinkSync方法使用说明
Dec 17 Javascript
浅析Bootstrip的select控件绑定数据的问题
May 10 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
详解Webpack实战之构建 Electron 应用
Dec 25 Javascript
Angular2学习笔记之数据绑定的示例代码
Jan 03 Javascript
node.js基础知识小结
Feb 26 Javascript
vue实现户籍管理系统
May 29 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
Discuz 6.0+ 批量注册用户名
2009/09/13 PHP
php微信支付之APP支付方法
2015/03/04 PHP
PHP获取数组最大值下标的方法
2015/05/12 PHP
javascript判断两个IP地址是否在同一个网段的实现思路
2013/12/13 Javascript
浅析jquery的js图表组件highcharts
2014/03/06 Javascript
代码获取历史上的今天发生的事
2014/04/11 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
2015/04/13 Javascript
javascript实现控制文字大中小显示
2015/04/28 Javascript
jquery可定制的在线UEditor编辑器
2015/11/17 Javascript
jQuery+ajax简单实现文件上传的方法
2016/06/03 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
2016/10/28 Javascript
基于JavaScript实现Tab选项卡切换效果
2016/11/24 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
2017/12/12 Javascript
详解vue的diff算法原理
2018/05/20 Javascript
vue.js+element-ui动态配置菜单的实例
2018/09/07 Javascript
JQuery实现折叠式菜单的详细代码
2020/06/03 jQuery
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
python3.0 字典key排序
2008/12/24 Python
python机器学习理论与实战(六)支持向量机
2018/01/19 Python
利用python 更新ssh 远程代码 操作远程服务器的实现代码
2018/02/08 Python
PyQt5每天必学之像素图控件QPixmap
2018/04/19 Python
对python指数、幂数拟合curve_fit详解
2018/12/29 Python
Python3 chardet模块查看编码格式的例子
2019/08/14 Python
Django后端按照日期查询的方法教程
2021/02/28 Python
详解三种方式实现平滑滚动页面到顶部的功能
2019/04/23 HTML / CSS
迪卡侬波兰体育用品商店:Decathlon波兰
2020/03/31 全球购物
Linux不知道文件后缀名怎么判断文件类型
2012/04/26 面试题
医学生个人求职信范文
2013/09/24 职场文书
技校毕业生个人学习的自我评价
2014/02/21 职场文书
员工入职担保书范文
2014/04/01 职场文书
给老师的感谢信
2015/01/20 职场文书
长城导游词300字
2015/01/30 职场文书
社区干部培训心得体会
2016/01/06 职场文书
python操作xlsx格式文件并读取
2021/06/02 Python
Python标准库之typing的用法(类型标注)
2021/06/02 Python