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 SocialHistory 检查访问者是否访问过某站点
Aug 02 Javascript
ie focus bug 解决方法
Sep 03 Javascript
解决jquery的.animate()函数在IE6下的问题
Dec 03 Javascript
基于jQuery的一个扩展form序列化到json对象
Dec 09 Javascript
javascript生成json数据简单示例分享
Feb 14 Javascript
第一次接触神奇的Bootstrap菜单和导航
Aug 01 Javascript
javascript DOM的详解及实例代码
Mar 06 Javascript
深入理解JavaScript 参数按值传递
May 24 Javascript
angular框架实现全选与单选chekbox的自定义
Jul 06 Javascript
Vue之Watcher源码解析(1)
Jul 19 Javascript
vue-cli 组件的导入与使用教程详解
Apr 11 Javascript
微信小程序 select 下拉框组件功能
Sep 09 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框架的优缺点对比分析
2014/12/25 PHP
PHP查找与搜索数组元素方法总结
2015/06/12 PHP
zend framework中使用memcache的方法
2016/03/04 PHP
PHP生成图像验证码的方法小结(2种方法)
2016/07/18 PHP
document 和 document.all 分别什么时候用
2006/06/22 Javascript
Dom加载让图片加载完再执行的脚本代码
2008/05/15 Javascript
在html页面中包含共享页面的方法
2008/10/24 Javascript
JavaScript 设计模式学习 Factory
2009/07/29 Javascript
JavaScript中的类继承
2010/11/25 Javascript
js对象之JS入门之Array对象操作小结
2011/01/09 Javascript
jquery移动端TAB触屏切换实现效果
2020/12/22 Javascript
vuejs动态组件给子组件传递数据的方法详解
2016/09/09 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
2016/11/24 Javascript
bootstrap导航条实现代码
2016/12/28 Javascript
BootStrap表单宽度设置方法
2017/03/10 Javascript
JavaScript中一些特殊的字符运算
2017/08/17 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
2019/07/07 Javascript
Python工程师面试题 与Python基础语法相关
2016/01/14 Python
python使用arcpy.mapping模块批量出图
2017/03/06 Python
python实现解数独程序代码
2017/04/12 Python
python+pyqt5实现KFC点餐收银系统
2019/01/24 Python
Ubuntu下Anaconda和Pycharm配置方法详解
2019/06/14 Python
python判断自身是否正在运行的方法
2019/08/08 Python
如何使用python进行pdf文件分割
2019/11/11 Python
通过celery异步处理一个查询任务的完整代码
2019/11/19 Python
python全局变量引用与修改过程解析
2020/01/07 Python
简单了解pytest测试框架setup和tearDown
2020/04/14 Python
如何利用python web框架做文件流下载的实现示例
2020/06/02 Python
深入理解Python 多线程
2020/06/16 Python
CSS3实现内凹圆角的实例代码
2017/05/04 HTML / CSS
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
2013/01/30 HTML / CSS
P D PAOLA意大利官网:西班牙著名的珠宝首饰品牌
2019/09/24 全球购物
区域总监的岗位职责
2013/11/21 职场文书
《晚上的太阳》教学反思
2014/04/23 职场文书
副总经理任命书
2014/06/05 职场文书
导师对论文的学术评语
2015/01/04 职场文书