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下判断一个对象是否具有指定名称的属性的的代码
Jan 11 Javascript
javascript中的对象创建 实例附注释
Feb 08 Javascript
对于this和$(this)的个人理解
Sep 08 Javascript
jquery easyui combobox模糊过滤(示例代码)
Nov 30 Javascript
深入理解Javascript作用域与变量提升
Dec 09 Javascript
JavaScript、jQuery与Ajax的关系
Jan 24 Javascript
使用JQuery实现智能表单验证功能
Mar 08 Javascript
js基本算法:冒泡排序,二分查找的简单实例
Oct 08 Javascript
js实现自动轮换选项卡
Jan 13 Javascript
js实现九宫格拼图小游戏
Feb 13 Javascript
Vue工程模板文件 webpack打包配置方法
Dec 26 Javascript
详解js中的几种常用设计模式
Jul 16 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 的ArrayAccess接口 像数组一样来访问你的PHP对象
2010/10/12 PHP
PHP gbk环境下json_dencode传送来的汉字
2012/11/13 PHP
使用php发送有附件的电子邮件-(PHPMailer使用的实例分析)
2013/04/26 PHP
基于PHP实现数据分页显示功能
2016/05/26 PHP
PHP使用PHPExcel删除Excel单元格指定列的方法
2016/07/06 PHP
PHP钩子与简单分发方式实例分析
2017/09/04 PHP
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
2011/04/12 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
2014/06/07 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
什么是 AngularJS?AngularJS简介
2014/12/06 Javascript
Vue.js每天必学之过滤器与自定义过滤器
2016/09/07 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
2017/01/22 Javascript
JavaScript轻松创建级联函数的方法示例
2017/02/10 Javascript
基于IView中on-change属性的使用详解
2018/03/15 Javascript
vue组件中的数据传递方法
2018/05/14 Javascript
NodeJS如何实现同步的方法示例
2018/08/24 NodeJs
微信小程序实现文字无限轮播效果
2018/12/28 Javascript
百度小程序自定义通用toast组件
2019/07/17 Javascript
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
Vue和React有哪些区别
2020/09/12 Javascript
[01:51]DAC趣味视频-如何成为职业选手.mp4
2017/04/02 DOTA
Scrapy框架介绍之Puppeteer渲染的使用
2020/06/19 Python
西班牙太阳镜品牌:Hawkers
2018/03/11 全球购物
领先的荷兰线上超市:荷兰之家Holland at Home(支持中文)
2021/01/21 全球购物
写一个函数返回1+2+3+…+n的值(假定结果不会超过长整型变量的范围)
2014/09/05 面试题
护士的自我鉴定
2014/02/07 职场文书
财务学生的职业生涯发展
2014/02/11 职场文书
信访工作经验交流材料
2014/05/23 职场文书
元旦趣味活动方案
2014/08/22 职场文书
幼儿园辞职信范文
2015/02/27 职场文书
个人优缺点总结
2015/02/28 职场文书
争先创优个人总结
2015/03/04 职场文书
MySQL面试题讲解之如何设置Hash索引
2021/11/01 MySQL
详细聊聊Oracle表碎片对性能有多大的影响
2022/03/19 Oracle
mysql的单列多值存储实例详解
2022/04/05 MySQL
python和Appium的移动端多设备自动化测试框架
2022/04/26 Python