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的日期联动实现代码
Feb 24 Javascript
再谈querySelector和querySelectorAll的区别与联系
Apr 20 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
Dec 16 Javascript
js的回调函数详解
Jan 05 Javascript
JS锚点的设置与使用方法
Sep 05 Javascript
JS实现类似百叶窗下拉菜单效果
Dec 30 Javascript
快速解决brew安装特定版本flow的问题
May 17 Javascript
LayerClose弹窗关闭刷新方法
Aug 17 Javascript
JavaScript实现星级评价效果
May 17 Javascript
如何进行微信公众号开发的本地调试的方法
Jun 16 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
Apr 09 Javascript
javascript递归函数定义和用法示例分析
Jul 22 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防CC攻击实现代码
2011/12/29 PHP
php shell超强免杀、减少体积工具实现代码
2012/10/16 PHP
PHP批量采集下载美女图片的实现代码
2013/06/03 PHP
PHP 登录完成后如何跳转上一访问页面
2014/01/14 PHP
php 自定义错误日志实例详解
2016/11/12 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
PHP实现一维数组与二维数组去重功能示例
2018/05/24 PHP
PHP类的自动加载机制实现方法分析
2019/01/10 PHP
PHP实现的用户注册表单验证功能简单示例
2019/02/25 PHP
PHP实现字符串的全排列详解
2019/04/24 PHP
ThinkPHP5.1+Ajax实现的无刷新分页功能示例
2020/02/10 PHP
浅谈PHP中的那些魔术常量
2020/12/02 PHP
jQuery select操作控制方法小结
2010/05/26 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
2012/02/11 Javascript
js检测输入内容全为空格的方法
2014/05/03 Javascript
js自定义QQ菜单效果
2017/01/10 Javascript
vue组件详解之使用slot分发内容
2018/04/09 Javascript
解决layui-open关闭自身窗口的问题
2019/09/10 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
2020/06/29 Javascript
javascript实现雪花飘落效果
2020/08/19 Javascript
Vue循环中多个input绑定指定v-model实例
2020/08/31 Javascript
python两种遍历字典(dict)的方法比较
2014/05/29 Python
python获得文件创建时间和修改时间的方法
2015/06/30 Python
Python中将字典转换为XML以及相关的命名空间解析
2015/10/15 Python
python利用有道翻译实现&quot;语言翻译器&quot;的功能实例
2017/11/14 Python
Python拼接微信好友头像大图的实现方法
2018/08/01 Python
用Python编写一个高效的端口扫描器的方法
2018/12/20 Python
pygame实现贪吃蛇游戏(上)
2019/10/29 Python
Python基于WordCloud制作词云图
2019/11/29 Python
介绍一下游标
2012/01/10 面试题
主要的Ajax框架都有什么
2013/11/14 面试题
会计电算化专业应届大学生求职信
2013/10/22 职场文书
公司员工的自我评价范例
2013/11/01 职场文书
求职信的最佳写作思路
2014/02/01 职场文书
职工运动会感言
2014/02/07 职场文书
浅析Python中的套接字编程
2021/06/22 Python