(五)带属性值的ng-app指令,实现自定义模块的自动加载
来源:互联网 发布:js前端面试题单选题 编辑:程序博客网 时间:2024/05/01 04:23
现在我们看下如何使用带属性值的ng-app命令,让ng-app自动加载我们自定义的模块作为根模块。
<!DOCTYPE html><html><head><script src="angular.js"></script><script> var rootMoudle = angular.module('rootMoudle', []);rootMoudle.controller("rootControl",function($scope){$scope.name="aty"}); </script><head><body><div id="moudle1" ng-app="rootMoudle" ng-controller="rootControl">div1:{{name}}</div></body></html>
可以看到,我们使用了angular.module()函数,创建了一个自定义的模块,我们并没有显示加载。但是通过运行效果可以看出:ng-app这个指令自动加载了我们自定义的rootMoudle。我们知道,使用angular.bootstrap()可以手动加载模块,如果我们自己调用这个函数是什么效果呢?
<html><head><script src="angular-1.2.2/angular.js"></script><script> var rootMoudle = angular.module('rootMoudle', []);rootMoudle.controller("rootControl",function($scope){$scope.name="aty"});//页面加载完成后,加载rootMoudleangular.element(document).ready(function(){angular.bootstrap(document.getElementById("moudle1"), ['rootMoudle']);}); </script><head><body><div id="moudle1" ng-app="rootMoudle" ng-controller="rootControl">div1:{{name}}</div></body></html>
用IE运行这个网页,用F12观察控制台报错:
SCRIPT5022: [ng:btstrpd] App Already Bootstrapped with this Element '<div class="ng-scope ng-binding" id="moudle1" ng-app="rootMoudle" ng-controller="rootControl">'
这就是说:ng-app已经自动完成了rootMoudle的加载,我们没有必要多此一举,再次显示调用angular.bootstrap来加载。也可以看得出:angular框架,一个模块只允许加载一次。ng-app用来自动加载模块,bootstrap用来手动加载模块。
0 0
- (五)带属性值的ng-app指令,实现自定义模块的自动加载
- ng-app自动加载的使用
- (三)ng-app的使用困惑和angularJS框架的自动加载
- 使用angular.bootstrap完成模块的手动加载(一个页面多个ng-app时使用)
- AngularJS中ng-app、ng-model、ng-bind、ng-init、ng-repeat、自定义指令
- 【Angular】ng-app指令:确定应用程序的边界
- ng的一些指令
- 带属性的自定义标签
- 带属性的自定义标签
- 带属性的自定义标签
- angular的自定义属性和ng-href属性
- 五、类的自动加载
- 自定义ViewFlipper实现带索引效果的自动播放广告栏
- 01-指令ng-app
- 自定义View,自定义属性(带进度的圆形进度条)
- 加载自定义属性实现app换肤功能
- 带参数的可加载模块
- ng-if与ng-show、ng-hide指令的区别
- 嵌入式 网卡驱动PHY的id组成小结
- 【产品设计】界面原型设计工具汇总
- Android简易计算器(破烂Alpha版,后续更新)
- 请谈谈你对大数据的理解
- 如何使用eclipse打开已有工程
- (五)带属性值的ng-app指令,实现自定义模块的自动加载
- Delegate Cannot find protocol declaration
- phpMyAdmin 的配置
- 初学嵌入式遇到的几个问题
- 王垠:程序员的心理疾病
- 【产品设计】界面原型设计工具汇总
- js学习笔记
- 解决android有的手机拍照后上传图片被旋转的问题
- zend framework中Action名的最后一位不能为数字,否则会出错