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中的方法调用详细介绍
Dec 30 Javascript
极力推荐10个短小实用的JavaScript代码段
Aug 03 Javascript
JS实现的样式切换功能tableCSS实例
Dec 30 Javascript
vue中页面跳转拦截器的实现方法
Aug 23 Javascript
Windows下Node.js安装及环境配置方法
Sep 18 Javascript
JS文件中加载jquery.js的实例代码
May 05 jQuery
微信小程序实现时间预约功能
Nov 27 Javascript
你知道JavaScript Symbol类型怎么用吗
Jan 08 Javascript
ES6中new Function()语法及应用实例分析
Feb 19 Javascript
js实现自动锁屏功能
Jun 02 Javascript
TS 类型收窄教程示例详解
Sep 23 Javascript
js 实现Material UI点击涟漪效果示例
Sep 23 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 采集程序中常用的函数
2009/12/09 PHP
探讨:web上存漏洞及原理分析、防范方法
2013/06/29 PHP
PHP中if和or运行效率对比
2014/12/12 PHP
php中文验证码实现方法
2015/06/18 PHP
摘自百度的图片轮换效果代码
2007/11/19 Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
2010/06/12 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
Firefox中beforeunload事件的实现缺陷浅析
2012/05/03 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
使用GruntJS构建Web程序之构建篇
2014/06/04 Javascript
JavaScript的内存释放问题详解
2015/01/21 Javascript
Jquery实现鼠标移动放大图片功能实例
2015/03/25 Javascript
js滑动提示效果代码分享
2016/03/10 Javascript
JavaScript实现获取select下拉框中第一个值的方法
2018/02/06 Javascript
详解关于Vuex的action传入多个参数的问题
2019/02/22 Javascript
基于canvas实现手写签名(vue)
2020/05/21 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
2020/12/20 Javascript
vue-quill-editor插入图片路径太长问题解决方法
2021/01/08 Vue.js
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python分割和拼接字符串
2013/11/01 Python
python逐行读写txt文件的实例讲解
2018/04/03 Python
使用python实现ftp的文件读写方法
2019/07/02 Python
python爬虫库scrapy简单使用实例详解
2020/02/10 Python
matplotlib 生成的图像中无法显示中文字符的解决方法
2020/06/10 Python
Opencv+Python识别PCB板图片的步骤
2021/01/07 Python
python中pyqtgraph知识点总结
2021/01/26 Python
canvas生成带二维码海报的踩坑记录
2019/09/11 HTML / CSS
Merrell迈乐澳大利亚网站:购买户外登山鞋
2017/05/28 全球购物
实习护理工作自我评价
2013/09/25 职场文书
幼儿园秋游活动方案
2014/01/21 职场文书
德语专业求职信
2014/03/12 职场文书
中学生英语演讲稿
2014/04/26 职场文书
中班上学期个人总结
2015/02/12 职场文书
催款律师函范文
2015/05/27 职场文书
导游词之宿迁乾隆行宫
2019/10/15 职场文书
JavaScript执行机制详细介绍
2021/12/06 Javascript