发表于： 2017-05-28 23:36:29
2 1050
什么是angualr的控制器？
1.背景介绍
什么是controller
AngularJS 控制器是常规的 JavaScript 对象。
AngularJS 控制器 控制 AngularJS 应用程序的数据。
简单的说：
在angularJS中，controller是一个javascript函数/类，用于操作作用域中，各个对象的初始状态以及相应的行为。
2.知识剖析
举个例子解释controller的作用域
<body ng-app="show">
<div style="background:#9933ff" ng-controller="ctrlOne">
<p style="text-align:center"><b>{{value}}</b></p>
</div>
<div style="background:#fcc800" ng-controller="ctrlTwo">
<p style="text-align:center"><b>{{value}}</b></p>
</div>
</body>
<script src="../js/angular.js"></script>
<script>
angular.module('show',[])
.controller('ctrlOne',function ($scope) {
$scope.value='修真院官网jnshu.com';
})
.controller('ctrlTwo',function ($scope) {
$scope.value='邀请码26063780';
})
</script>
也就是说，在HTML中，绑定ng-controller的那个DOM节点内的所有子标签，将会是当前controller的作用域。
在大型项目中,如果HTML DOM 中有多个作用域，这时你就需要知道你使用的 scope 对应的作用域是哪一个。
多controller的实现
根据上面的例子，我们知道，angularJS中view层解析是通过controller的作用域来将$scope对象解析成相应的内容，因此我们可以在同一个界面上划分不同的模块，通过不同的控制器控制不同的模块来进行开发，这样通过划分模块的开发方式，对今后维护代码带来了便利。
在编码实战中，我将会具体的简介这个问题。
3.常见问题
controller之间的数据该如何传输？
4.解决方案
使用service,实现controller之间的数据传输
在之前的例子我们提到，controller是相对独立的，两个controller之间，内存是不共享的，同级DOM下，两个controller是无法互相访问其中的属性或者方法的。
那么，在实际项目中，我们会有很多的页面和控制器，不同页面下的controller之间有时候是需要传输数据的，之前我们学习了localStorage，用于页面之间的传参。
其实，官方建议页面之间通过service互相访问。
具体内容见 扩展思考
5.编码实战
在controller中嵌套controller会出现什么样的问题？
<body ng-app="show" ng-controller="rootCtrl">
<p style="text-align:center; background:#fcc800; color:#000"><b>{{value}}</b></p>
<div ng-controller="ctrlOne">
<p style="text-align:center; background:#fcc800; color:#000"><b>{{value}}</b></p>
</div>
<div ng-controller="ctrlTwo">
<p style="text-align:center; background:#fcc800; color:#000"><b>{{value}}</b></p>
</div>
</body>
<script src="../js/angular.js"></script>
<script>
angular.module('show',[])
.controller('rootCtrl',function ($scope) {
$scope.value='邀请码26063780';
})
.controller('ctrlOne',function ($scope) {
})
.controller('ctrlTwo',function ($scope) {
})
</script>
由此可见，controller的作用域跟js作用域相似。
注意：在大型项目中，为了代码规范，很少会使用这种方法，同时这种行为很危险！
6.扩展思考
如何使用angular中的Service服务在多个controller之间的进行数据传输？
<body ng-app="show">
<div style="background:#9933ff" ng-controller="ctrlOne">
<p style="text-align:center"><b>{{value}}</b></p>
</div>
<div style="background:#fcc800" ng-controller="ctrlTwo">
<p style="text-align:center"><b>{{value}}</b></p>
</div>
</body>
<script src="../js/angular.js"></script>
<script>
angular.module('show',[])
.service ('demoService',function () {
var data1= '澳门首家线上...';
this.data2= '本站立足于美利坚...';
this.getData= function () {
return data1;
}
})
.controller('ctrlOne',function ($scope,demoService) {
$scope.value='修真院官网jnshu.com';
$scope.value= demoService.data2;
})
.controller('ctrlTwo',function ($scope,demoService) {
$scope.value='邀请码26063780';
$scope.value= demoService.getData();
})
</script>
以上只是简单的使用了service，更多的方法可以自行百度学习下。
7.参考文献
参考一：博客园
参考二：菜鸟教程
8.更多讨论
在开发项目中，如何有效的管理controller和service文件?
返回列表
评论