手动初始化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 相关文章推荐
javascript 模拟JQuery的Ready方法实现并出现的问题
Dec 06 Javascript
HTA版JSMin(省略修饰语若干)基于javascript语言编写
Dec 24 Javascript
JS动态增加删除UL节点LI及相关内容示例
May 21 Javascript
JavaScript定义变量和变量优先级问题探讨
Oct 11 Javascript
常用的JS验证和函数汇总
Dec 23 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
Dec 05 Javascript
JS动态生成年份和月份实例代码
Feb 04 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
Mar 08 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
Jun 07 Javascript
Angular服务Request异步请求的实例讲解
Aug 13 Javascript
js限制输入框只能输入数字(onkeyup触发)
Sep 28 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 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
对javascript和select部件的结合运用
2006/10/09 PHP
PHP中使用unset销毁变量并内存释放问题
2012/07/05 PHP
ThinkPHP基本的增删查改操作实例教程
2014/08/22 PHP
PHP中常用的字符串格式化函数总结
2014/11/19 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
PHP PDOStatement::nextRowset讲解
2019/02/01 PHP
基于jquery实现的类似百度搜索的输入框自动完成功能
2011/08/23 Javascript
分享一个常用的javascript静态类
2014/12/31 Javascript
jQuery实现的仿百度分页足迹效果代码
2015/10/30 Javascript
JavaScript面向对象编写购物车功能
2016/08/19 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
Vue自定义指令使用方法详解
2017/08/21 Javascript
jQuery实现的上传图片本地预览效果简单示例
2018/03/29 jQuery
vue2.0+vue-router构建一个简单的列表页的示例代码
2019/02/13 Javascript
详解一个基于套接字实现长连接的express
2019/03/28 Javascript
封装微信小程序http拦截器过程解析
2019/08/13 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
2019/10/27 Javascript
通过javascript实现扫雷游戏代码实例
2020/02/09 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
2020/09/21 Javascript
[11:33]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第二场
2018/04/06 DOTA
[01:11:15]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python生成随机密码
2015/03/10 Python
Python编程实现控制cmd命令行显示颜色的方法示例
2017/08/14 Python
使用Python写一个小游戏
2018/04/02 Python
使用Pandas对数据进行筛选和排序的实现
2019/07/29 Python
python实现的接收邮件功能示例【基于网易POP3服务器】
2019/09/11 Python
完美解决Django2.0中models下的ForeignKey()问题
2020/05/19 Python
Python 中的函数装饰器和闭包详解
2021/02/06 Python
俄罗斯厨房产品购物网站:COOK HOUSE
2021/03/15 全球购物
中学生个人自我评价
2014/02/06 职场文书
军训自我鉴定范文
2014/02/13 职场文书
金融事务专业毕业生求职信
2014/02/23 职场文书
超市创业计划书
2014/09/15 职场文书
银行党员批评与自我批评
2014/10/15 职场文书
某学校的2019年度工作报告范本
2019/10/11 职场文书