控制器的作用
今天和大家学习AngularJS中控制器方面的知识，本文会给出一些例子来说明如何使用AngularJS的控制器。在开始我们的例子之前，首先说说AngularJS控制器的作用。简单的来说AngularJS的控制器是一个函数，它通过操作$scope对象来改变视图。AngularJS同其他JS框架最主要的区别是控制器不合适用来执行DOM操作、格式化以及除存储数据模型之外的状态维护操作。换句话说，控制器只是 $scope和视图之间的桥梁。
code
下面的例子中展示如何使用控制器，在控制器中定义JS函数修改$scope对象的属性值，从而改变视图的展示。
<!DOCTYPE html>
<!--绑定MyApp AngularJS模块-->
<html ng-app="MyApp">
<head>
<title>HelloWorld APP</title>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<!--div绑定MyFirstController-->
<div ng-controller="MyFirstController">
<!--点击Add button调用add函数增加1-->
<button ng-click="add(1)" class="button">Add</button>
<!--点击subtract button调用subtract函数减1-->
<button ng-click="subtract(1)" class="button">Subtract</button>
<!--绑定count，显示计数器的值-->
<p1>counter: {{counter}}</p1>
</div>
<script type="text/javascript" src="js/FirstController.js"></script>
</body>
</html>
<!--创建MyApp模块-->
var app = angular.module("MyApp", []);
<!--创建MyFirstController控制器-->
app.controller("MyFirstController", function ($scope) {
<!--初始化化计数器的值-->
$scope.counter = 0;
<!--定义增加函数-->
$scope.add = function (amount) {
$scope.counter += amount;
};
<!--定义减函数-->
$scope.subtract = function () {
$scope.counter -= amount;
}
})
视图显示结果如下，点击add显示数字+1,点击subtract显示数字-1.
指令ng-controller可以创建作用域，当嵌套ng-controller，内部嵌套的controller可以访问到外部controller定义的socpe属性。
Suggestion
- 控制器应当尽量保持短小精悍, 不要选择在控制器中操作视图和复杂的业务逻辑
- 复杂的逻辑的通常放到指令和服务中去
Conclusion
今天和大家学习了AngularJS控制器的使用方法，希望能够和大家一起进步。加油:)