手动初始化Angular的模块与控制器


Posted in Javascript onDecember 26, 2016

在上面的文章中,都是在html元素上绑定ng-app="myApp",然後使用angular.module('myApp',[]);来初始化模块的操作,下面我们来用angular.bootstrap方法手动初始化模块。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>DEMO</title>
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js"></script>
</head>
<body>
<div ng-controller='Aaa'>
 <p>{{name}}</p>
</div>
<div ng-controller='Bbb'>
 <p>{{name}}</p>
</div>
<script type="text/javascript">
var m1 = angular.module('myApp1',[]);
var m2 = angular.module('myApp2',[]);
m1.controller('Aaa',function($scope){
 $scope.name = 'hello AngularJs';
});
m2.controller('Bbb',function($scope){
 $scope.name = 'Hi';
});
//点击的时候初始化模块
document.onclick = function(){
 var aDiv = document.getElementsByTagName('div');
 //多次初始化操作
 angular.bootstrap(aDiv[0],['myApp1']);
 angular.bootstrap(aDiv[1],['myApp2']);
};
</script>
</body>
</html>

除了手动初始化模块外,还能使用run方法初始化控制器(但是数据必须是全局的)。

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>DEMO</title>
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js"></script>
</head>
<body>
<div>
 <p>这里没有使用ng-controller命令</p>
 <p>{{name}}</p>
</div>
<script type="text/javascript">
var m1 = angular.module('myApp',[]);
//不需要创建控制器引用也可以更改数据
//rootScope是全局作用域
m1.run(['$rootScope',function($rootScope){
 $rootScope.name = 'hello';
}]);
</script>
</body>
</html>

在run下不能使用$scope局部,否侧会报错!

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
js中查找最近的共有祖先元素的实现代码
Dec 30 Javascript
JavaScript高级程序设计 事件学习笔记
Sep 10 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
Apr 26 Javascript
Jquery 整理元素选取、常用方法一览表
Nov 26 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
Feb 22 Javascript
Angularjs实现控制器之间通信方式实例总结
Mar 27 Javascript
vue设计一个倒计时秒杀的组件详解
Apr 06 Javascript
JS实现给数组对象排序的方法分析
Jun 24 Javascript
vue el-table实现自定义表头
Dec 11 Javascript
小程序中手机号识别的示例
Dec 14 Javascript
详解javascript脚本何时会被执行
Feb 05 Javascript
JS前端监控采集用户行为的N种姿势
Jul 23 Javascript
详解Python中logging日志模块在多进程环境下的使用
Dec 26 #Javascript
Angular的事件和表单详解
Dec 26 #Javascript
Angular的MVC和作用域
Dec 26 #Javascript
JS中用try catch对代码运行的性能影响分析
Dec 26 #Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
Dec 26 #Javascript
Angular的$http与$location
Dec 26 #Javascript
Angular ng-repeat指令实例以及扩展部分
Dec 26 #Javascript
You might like
php设计模式 Proxy (代理模式)
2011/06/26 PHP
PHP捕获Fatal error错误的方法
2014/06/11 PHP
Docker配置PHP开发环境教程
2016/12/21 PHP
PHP反射机制原理与用法详解
2017/02/15 PHP
Laravel 修改验证异常的响应格式实例代码详解
2020/05/25 PHP
Javascript 闭包引起的IE内存泄露分析
2012/05/23 Javascript
Node.js插件的正确编写方式
2014/08/03 Javascript
js实现键盘控制DIV移动的方法
2015/01/10 Javascript
深入浅析JavaScript中的作用域和上下文
2016/03/26 Javascript
理解javascript对象继承
2016/04/17 Javascript
JS自定义滚动条效果简单实现代码
2020/10/27 Javascript
js读取本地文件的实例
2017/12/22 Javascript
利用vue + element实现表格分页和前端搜索的方法
2017/12/25 Javascript
关于vue面试题汇总
2018/03/20 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
2019/04/17 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
2019/12/08 Javascript
Vue中多元素过渡特效的解决方案
2020/02/05 Javascript
ES6函数和数组用法实例分析
2020/05/23 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
[38:54]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第一场 11.28
2020/12/01 DOTA
详解python 拆包可迭代数据如tuple, list
2017/12/29 Python
Python pymongo模块用法示例
2018/03/31 Python
Python2.7 实现引入自己写的类方法
2018/04/29 Python
Pandas:DataFrame对象的基础操作方法
2018/06/07 Python
使用pandas把某一列的字符值转换为数字的实例
2019/01/29 Python
python基于json文件实现的gearman任务自动重启代码实例
2019/08/13 Python
详解Python中的format格式化函数的使用方法
2019/11/20 Python
python实现大战外星人小游戏实例代码
2019/12/26 Python
Python list运算操作代码实例解析
2020/01/20 Python
利用python清除移动硬盘中的临时文件
2020/10/28 Python
canvas画布实现手写签名效果的示例代码
2019/04/23 HTML / CSS
h5使用canvas画布实现手势解锁
2019/01/04 HTML / CSS
英国在线自行车商店:Evans Cycles
2016/09/26 全球购物
中医药大学毕业生自荐信
2013/11/08 职场文书
减负增效提质方案
2014/05/23 职场文书
如何解决.cuda()加载用时很长的问题
2021/05/24 Python