ng-app一些使用

　　ng-app是angular的一个指令，代表一个angular应用（也叫模块）。使用ng-app或ng-app=""来标记一个DOM结点，让框架会自动加载。也就是说，ng-app是可以带属性值的。如果想要实现自动加载，那么就不能让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含有2个ng-app，那么两个都会加载。

<html><body ng-app=“”><div ng-app>div1:{{1+3*2}}</div><div ng-app>div2:{{1+3*2}}</div><script src="angular.js"></script></body>
</html>

　　4、ng-app带有属性，不能自动加载

<html><body><div ng-app="app1">div1:{{1+3*2}}</div><script src="angular.js"></script></body>
</html>

　　5、ng-app带有属性，可自动加载自己定义的模块

<!DOCTYPE html>
<html>    <head><head><body><div id="moudle1"  ng-app="rootMoudle" ng-controller="rootControl">div1:{{name}}</div></body><script src="angular.js"></script><script>var rootMoudle = angular.module('rootMoudle', []);      rootMoudle.controller("rootControl",function($scope){$scope.name="aty"});      </script>
</html>

　　6、angular.bootstrap()可以手动加载模块

<html><head>           <head><body><div id="moudle1"  ng-app="rootMoudle" ng-controller="rootControl">div1:{{name}}</div></body><script src="angular-1.2.2/angular.js"></script><script>       //页面载入完毕后,载入rootMoudleangular.element(document).ready(function(){       angular.bootstrap(document.getElementById("moudle1"), ['rootMoudle']);});       </script>
</html>

转载于:https://www.cnblogs.com/dfghjkl/p/5550215.html

ng-app一些使用相关推荐

如何提高App Store审核通过率
应用审核流程大体分为三部分:预审.机审和人工审核. 1.预审:资源类审核,提交程序包时,对Icon.plist.图片等资源文件的审核,常见问题包括:图片格式(无alpha).程序包文件等问题. 2.机 ...
angular（3）服务 --注入---自定义模块--单页面应用
ng内部,一旦发生值改变操作,如$scope.m=x,就会自动轮询$digest队列,触发指定的$watch,调用其回调函数,然后修改dom树. 干货:https://github.com/xufei ...
流量都去哪儿了——三板斧搞定Android网络流量测试
流量是什么? 为什么要进行流量测试? 流量测试方法有哪些? 怎么统计流量并进行结果分析? 带着这些疑问,小编带您探寻Android网络流量的测试方法. 1 流量是什么? 随着智能手机的普及,移动互联网 ...
Flappy Bird 恶意程序详细分析
爱小狐狸的小螃蟹 · 2014/03/25 17:55 0x00 背景 Flappy Bird是在年初的时候非常火爆的一个小游戏,但是后来作者在2014年2月10日将其在Apple与Google商店下 ...
php 生成excel透视表,利用Javascript仿Excel的数据透视分析功能
什么是数据透视分析? 数据透视分析就是要在不同维度对数据进行汇总,过滤,分析,比较,作图.用来发现数据的变化趋势和不同因素导致的差异. 这在销售,统计,金融等方面十分有用,常常会在一些管理软件中使 ...
跟我读AngularJs的源代码
你要相信,再牛逼的框架他的本质也是javascript代码,只要你会js代码你就能看懂!别怂! AngularJs是一个很简单的框架(其设计思想很前卫,涉及领域很广,使得它表现出很难的特性,但是你要相 ...
iOS 上传应用到APPStore 详细版
现在仔细写个上传应用的过程,希望可以帮助到有需要得人上传应用第一步:去到苹果开发者中心https://developer.apple.com/account/ios/certificate/cert ...
iOS内购规则及做法分析
1. IAP规则详解本文所述IAP(In-App Purchase),特指苹果App Store的应用内购买,是苹果为App内购买虚拟商品或服务提供的一套交易系统. 首先来讨论一下IAP的基本规则以 ...
angular4 ng build --prod 报错：Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfac
刚开始遇见错误的时候还以为是项目内部的问题,查了一些资料发现是angular-cli的版本有点低了. 解决步骤如下: 第一步:rimraf node_modules 第二步:cnpm install ...
ionic + cordova+angularJs 搭建的H5 App完整版总结
为期半个月的项目实践开发,已完整告一段落,团队小组获得第一名,辛苦总算没有白费,想起有一天晚上,整个小组的人,联调到12点才从公司回去,真是心酸.这里总结一下,项目过程中遇到的问题和感悟.哈哈,放张 ...

ng-app一些使用

ng-app一些使用相关推荐

最新文章

热门文章