angular控制器是什么？

这里是修真院web小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解web知识/技能，本篇分享的是：

【angular控制器是什么？】

一、背景介绍

AngularJS 控制器是常规的 JavaScript 对象。AngularJS 控制器控制 AngularJS 应用程序的数据。简单的说：在angularJS中，controller是一个javascript函数/类，用于操作作用域中，各个对象的初始状态以及相应的行为。

二、知识剖析

1.举个例子解释controller的作用域

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body ng-app="demo">
<div ng-controller="first">
{{name}}
</div>
<p ng-controller="second">
{{name}}
</p>
</body>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
<script>
angular.module("demo",[])
.controller('first',function ($scope) {
$scope.name="胖虎";
})
.controller('second',function ($scope) {
$scope.name="大雄";
})
</script>
</html>

胖虎&大雄

也就是说，在HTML中，绑定ng-controller的那个DOM节点内的所有子标签，将会是当前controller的作用域。在大型项目中,如果HTML DOM 中有多个作用域，这时你就需要知道你使用的 scope 对应的作用域是哪一个。

2.多controller的实现

根据上面的例子，我们知道，angularJS中view层解析是通过controller的作用域来将$scope对象解析成相应的内容，因此我们可以在同一个界面上划分不同的模块，通过不同的控制器控制不同的模块来进行开发，这样通过划分模块的开发方式，对今后维护代码带来了便利。
在编码实战中，我将会具体介绍这个问题。

三、常见问题

controller之间的数据该如何传输？

四、解决方案

使用service实现controller之间的数据传输。

在之前的例子我们提到，controller是相对独立的，两个controller之间，内存是不共享的，同级DOM下，两个controller是无法互相访问其中的属性或者方法的。
那么，在实际项目中，我们会有很多的页面和控制器，不同页面下的controller之间有时候是需要传输数据的，之前我们学习了localStorage，用于页面之间的传参。
其实，官方建议页面之间通过service互相访问。
具体内容见扩展思考。

五、编码实战

在controller中嵌套controller会出现什么样的问题？
首先，我将原来页面中两个控制器所在的div外面又套了一个控制器，添加了1个变量，并将其余两个控制器中的同名变量删除。如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body ng-app="demo">
<div ng-controller="all">
{{name}}
<div ng-controller="first">
{{name}}
</div>
<p ng-controller="second">
{{name}}
</p>
</div>
</body>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
<script>
angular.module("demo",[])
.controller('first',function ($scope) {
// $scope.name="胖虎";
})
.controller('second',function ($scope) {
// $scope.name="大雄";
})
.controller('all',function ($scope) {
$scope.name="小夫";
})
</script>
</html>

小夫

由此可见，controller的作用域跟js作用域相似。
注意：在大型项目中，为了代码规范，很少会使用这种方法，同时这种行为很危险！

六、扩展思考

如何使用angular中的Service服务在多个controller之间的进行数据传输？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body ng-app="demo"><div style="background:#6ddfff;" ng-controller="first">
<button ng-click="change()">更换演员</button><br/>
{{role.name}}<br/>
{{role.sex}}
</div>
<div style="background:#ff7774;" ng-controller="second">
<button ng-click="start()">演出开始</button><br/>
{{role.name}}<br/>
{{role.sex}}
</div>
</body>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
<script>
angular.module("demo",[])
.service("demoService",function(){
this.actor={
name:"大雄",
sex:"男"
};
this.actress={
name:"静香",
sex:"女"
}
})
.controller("first",function ($scope,demoService) {
$scope.role=demoService.actor;
$scope.change=function () {
demoService.actor={
name:"胖虎",
sex:"男"
};
$scope.role=demoService.actor;
}
})
.controller("second",function ($scope,demoService) {
$scope.role=demoService.actress;
$scope.start=function () {
$scope.role=demoService.actor;
}
})
</script>
</html>

点击按钮之前：

大雄&静香

先点击“更换演员”：

胖虎&静香

再点击“演出开始”：

胖虎

以上只是简单的使用了service，更多的方法可以自行百度学习下。

七、更多讨论

讨论点一、在开发项目中，如何有效的管理controller和service文件?
讨论点二、创建service还有哪些方式?

八、参考文献

参考一：神奇的angularJS——controller控制器的作用
参考二：神奇的angularJS --连接controller的桥梁 service

【更多内容，欢迎加入交流群565763832与大家一起讨论交流】