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加密解密7种方法总结分析
Oct 07 Javascript
JavaScript中Math对象使用说明
Jan 16 Javascript
WordPress 照片lightbox效果的运用几点
Jun 22 Javascript
Highcharts 非常实用的Javascript统计图demo示例
Jul 03 Javascript
通过action传过来的值在option获取进行验证的方法
Nov 14 Javascript
JavaScript中数组成员的添加、删除介绍
Dec 30 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
Mar 04 Javascript
纯js实现手风琴效果代码
Apr 17 Javascript
JS中Array数组学习总结
Jan 18 Javascript
详解基于angular-cli配置代理解决跨域请求问题
Jul 05 Javascript
小程序实现多选框功能
Oct 30 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
Feb 28 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
Oracle Faq(Oracle的版本)
2006/10/09 PHP
如何使用PHP计算上一个月的今天
2013/05/23 PHP
php生成N个不重复的随机数实例
2013/11/12 PHP
php中debug_backtrace、debug_print_backtrace和匿名函数用法实例
2014/12/01 PHP
Laravel框架模板继承操作示例
2018/06/11 PHP
PHP设计模式之PHP迭代器模式讲解
2019/03/22 PHP
PHP从零开始打造自己的MVC框架之入口文件实现方法详解
2019/06/03 PHP
PHP7变量处理机制修改
2021/03/09 PHP
Jquery插件之多图片异步上传
2010/10/20 Javascript
jQuery timers计时器简单应用说明
2010/10/28 Javascript
javascript生成随机数方法汇总
2015/11/12 Javascript
JavaScript中判断数据类型的方法总结
2016/05/24 Javascript
jQuery使用each方法与for语句遍历数组示例
2016/06/16 Javascript
Angular 路由route实例代码
2016/07/12 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
2016/08/01 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
2016/12/23 Javascript
Vue自定义事件(详解)
2017/08/19 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
2017/10/09 Javascript
vue-cli3 从搭建到优化的详细步骤
2019/01/20 Javascript
一次让你了解全部JavaScript的作用域
2019/06/24 Javascript
layer.open 获取不到表单信息的解决方法
2019/09/26 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
2020/03/03 Javascript
[06:53]2018DOTA2国际邀请赛寻真——为复仇而来的Newbee
2018/08/15 DOTA
python的re模块应用实例
2014/09/26 Python
详解python脚本自动生成需要文件实例代码
2017/02/04 Python
Python获取二维数组的行列数的2种方法
2020/02/11 Python
Python自带的IDE在哪里
2020/07/01 Python
Python3.8安装Pygame教程步骤详解
2020/08/14 Python
jupyter 添加不同内核的操作
2021/02/06 Python
Hunkemöller瑞士网上商店:欧洲最大的内衣品牌之一
2018/12/03 全球购物
俄罗斯大型在线书店:Читай-город
2019/10/10 全球购物
设计4个线程,其中两个线程每次对j增加1,另外两个线程对j每次减少1。写出程序。
2014/12/30 面试题
软件工程师岗位职责
2013/11/16 职场文书
日语专业个人求职信范文
2014/02/02 职场文书
2015年安全生产目标责任书
2015/01/29 职场文书
2016年寒假政治学习心得体会
2015/10/09 职场文书