控制器的作用

今天和大家学习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控制器的使用方法，希望能够和大家一起进步。加油:)

AngularJS 第四天----控制器

控制器的作用

code

Suggestion

Conclusion

推荐阅读