在介绍完Angular中的表达式后，接下来我们再来介绍下Angular中一个重要角色——控制器。其实，在前面的章节中我们也多次提到它，那么，Angular中的控制器到底是什么？它又能实现哪些功能呢？接下来我们结合示例来逐一进行解析。
控制器的概念
控制器(controller)在Angular中占有重要的地位，它是组成前端MVC框架的其中一员，在Angular中，控制器的功能是管理页面的逻辑代码。当控制器通过“ng-controller”指令被添加到DOM页面时，Angular将会通过控制器构造函数生成一个实体的对象，而在生成这个对象的过程中，$scope对象作为参数注入其中，并允许用户访问$scope对象，这样一来，用户可以通过$scope对象与页面中的元素进行数据绑定，从而实现数据从控制器层到视图层的过程。
控制器初始化$scope对象
从上面对控制器的介绍，我们不难看出，控制器的任务就是操作$scope对象，而这种操作具体表现在两个方面：一是对$scope对象进行初始化，二是为$scope对象添加各种实现逻辑功能的方法。我们首先来看第一个功能，初始化$scope对象。
接下来，我们先通过一个完整的示例来介绍控制器初始化$scope对象的过程。
示例2-4 控制器初始化$scope对象
(1) 功能描述
在页面中，以应用模块的方法构建一个控制器对象，并以内联声明方式表明控制器对象依赖于$scope对象提供的服务。在控制器对象中，初始化$scope一个名为“text”的属性，并与页面的<span>元素进行数据绑定。
(2) 实现代码
新建一个HTML文件2-4.html，加入如代码清单2-4所示的代码。
代码清单2-4控制器初始化$scope对象
<!doctype html>
<html ng-app="a2_4">
<head>
<title>控制器初始化$scope对象</title>
<script src="../Script/angular.min.js"
type="text/javascript"></script>
</head>
<body>
<div ng-controller="c2_4">
<span>{{text}}</span>
</div>
<script type="text/javascript">
var a2_4 = angular.module('a2_4', []);
a2_4.controller('c2_4', ['$scope', function ($scope) {
$scope.text = 'Hello！Angular';
}]);
</script>
</body>
</html>
(3) 页面效果
执行HTML文件2-4.html，最终实现的页面效果如下图2-4所示：
图2-4控制器初始化$scope对象
(4) 源码分析
在本示例的源码中，自定义控制器函数由全局方式改为在Angular模块下使用 . controller方式创建，这种方式更加强调页面是一个整体的应用，控制器可以对应用中的某一个模块进行管理。相对于全局方式下的定义，该方式的扩展性和针对性更强。
在本示例的源码中，我们首先定义了一个名为“a2_4”的Angular模块，然后，通过下列代码，创建了一个名为“c2_4”的控制器：
a2_4.controller('c2_4', ['$scope', function ($scope) {
...代码块
}]);
在上述的代码中，采用内联注入的方式声明“c2_4”控制器的构建依赖Angular中的$scope对象，即在构建控制器时，Angular会自动将$scope对象作为参数注入到控制器中。
虽然在构建控制器函数时，$scope对象已经自动注入，但还是需要对它进行初始化，而初始化的方法是通过向该对象添加属性，在本示例中的代码如下：
$scope.text = 'Hello！Angular';
采用上述方式也可以添加多个属性，被添加的这些属性在控制器所管理的所有DOM元素中都可以采用数据绑定的方式进行访问，例如， 对于下列代码：
<div ng-controller="c2_4">
<span>{{text}}</span>
</div>
通过元素的“ng-controller”属性值指定控制器函数的名称，表明该元素中的全部DOM节点都受控制器管理，然后，采用双花括号的方式绑定控制器的数据，从而最终实现View层数据展示的功能。
网友评论