[译]AngularJS1.3.0 开发者指南(四) -- 控制器

理解Controllers

在AngularJS中, Controller是一个Javascript构造函数, 常常被用来扩展 Angular Scope 对象.

控制器通过 ng-controller 指令依附在DOM元素上, Angular通过指定的控制器构造函数, 实例化一个新的Controller对象. 这时, 一个被声明为$scope的新的子作用域被注入到控制器的构造函数中.

使用Controllers我们将可以:

设置$scope对象的初始化状态
给$scope对象添加行为

不要使用Controllers进行以下操作:

操作dom --- Controllers应该只包含业务逻辑. 把表现逻辑放到Controllers中会影响它的可测试性. Angular使用数据绑定机制来处理大多数实例, 并且通过指令机制封装DOM操作.
格式化输入 --- 应该使用 angular form controls 来代替这个操作.
过滤输出 --- 应该使用 angular filters代替.
通过控制器公用代码或共享状态 --- 应该使用 anguler services 来实现.
管理其他组件的生命周期(例如, 创建service实例)

设置$scope对象的初始状态

通常, 在你创建一个应用时, 你需要为Angular的$scope对象设置初始状态. 通过在$scope对象上附加属性的方式完成设置初始状态的操作. 这些属性包括了 视图模型(即要在视图中展示的模型). 在注册控制器的DOM中, 所有的$scope属性对于模板都是可用的.

下面的示例中, 创建了一个名为 GreetingController 控制器, 在这个控制器中, 将一个字符串属性'Hola!'添加在$scope对象上:

var myApp = angular.module('myApp',[]);

myApp.controller('GreetingController', ['$scope', function($scope) {
  $scope.greeting = 'Hola!';
}]);

在应用中, 创建了一个Angular Module (模块), myApp. 然后, 我们使用.controller()方法给模板添加一个控制器的构造函数. 这使得控制器的构造函数不会污染全局作用域.

对Angular提供的$scope服务, 我们可以用内联式注解指定控制器所需要的依赖, 详情见Dependency Injection.

我们可以使用ng-controller指令将控制器添加到DOM元素上. greeting属性现在可以通过数据绑定机制被绑定到模板上:

<div ng-controller="GreetingController">
{{ greeting }}
</div>

为作用域对象添加行为

为了在视图中响应事件或者执行计算, 我们必须在作用域提供相应的行为. 我们可以通过为$scope对象赋加方法的方式, 在作用域中添加行为. 这些方法可以在模板或视图中被调用到.

在下面的示例中, 通过控制器在作用域中添加了一个方法, 这个方法实现的数值翻倍:

var myApp = angular.module('myApp',[]);

myApp.controller('DoubleController', ['$scope', function($scope) {
  $scope.double = function(value) { return value * 2; };
}]);

一旦为DOM元素指定了某个控制器, 在模板中就可以通过Angular表达式调用double方法:

<div ng-controller="DoubleController">
Two times <input ng-model="num"> equals {{ double(num) }}
</div>

正如本指南的概念部分所讨论的, 分配到作用域上的任何对象(或原语)都作为模型的属性. 分配到作用域上的方法对于模板和视图来说都是可用的, 都可以通过Angular表达式和ng事件处理指令(例如: ng-click)来调用.

正确地使用控制器

通常, 控制器不应该做太多事情, 它应该只包括展示单个视图所需要的业务逻辑.

使得控制器简单的最觉的方式是封闭功能, 即把哪些不属于控制器的功能封闭到服务中, 然后在控制器中通过依赖注入的方式使用这些服务. 这一点将在本指南的依赖注入服务部分讨论.

将控制器和Angular作用对象联系起来

可以隐匿的通过ng-controller指令和$route服务将控制器和作用对象关联.

简单控制器示例

为了进一步说明控制器在Angular中是怎样工作的, 我们用下列组件创建一个小app:

包含两个按钮和一个简单展示信息的模板
包含一个字符串的模型, 此字符串命名为spice
包含两个函数的控制器, 这两个函数可以对spice进行赋值

这个展示信息与spice模型绑定, 而这个模型默认值为"very". 根据点击的按钮, spice模板被设值为chili或者jalapeño, 展示信息通过数据绑定机制自动更新为新的值.

<div ng-controller="SpicyController">
 <button ng-click="chiliSpicy()">Chili</button>
 <button ng-click="jalapenoSpicy()">Jalapeño</button>
 <p>The food is {{spice}} spicy!</p>
</div>

var myApp = angular.module('spicyApp1', []);

myApp.controller('SpicyController', ['$scope', function($scope) {
    $scope.spice = 'very';

    $scope.chiliSpicy = function() {
        $scope.spice = 'chili';
    };

    $scope.jalapenoSpicy = function() {
        $scope.spice = 'jalapeño';
    };
}]);

以上示例的注意事项:

ng-controller用于为我们的模板(隐匿的)创建一个作用域, 而此作用在控制器SpicyController得以加强(管理).
SpicyController只是一个普通的JavaScript函数. 作为(可选的)命名惯例, 命名要以大写字母开关, 并以"Controller"结尾.
给$scope对象添加属性即创建或更新了模型.
控制器中的方法可以通过直接给作用域赋值的形式创建出来(见chiliSpicy方法).
在模板中可以使用控制器中的方法和属性(例如<div>元素和它的子元素).

带参示例

控制器方法也可以传参数, 下面的示例对前一示例加以改动以展示效果:

<div ng-controller="SpicyController">
	<input ng-model="customSpice">
	<button ng-click="spicy('chili')">Chili</button>
	<button ng-click="spicy(customSpice)">Custom spice</button>
	<p>The food is {{spice}} spicy!</p>
</div>

var myApp = angular.module('spicyApp2', []);

myApp.controller('SpicyController', ['$scope', function($scope) {
    $scope.customSpice = "wasabi";
    $scope.spice = 'very';

    $scope.spicy = function(spice) {
        $scope.spice = spice;
    };
}]);

注意SpicyController控制器中只定义了一个spicy方法, 这个方法声名了spice参数. 然后模板引入这个控制器方法, 并在第一个按钮事件中传入字符串常量chili, 在第二个按钮事件中传入模型属性customSpice(与输入框绑定).

作用域继承示例

通过会将控制器添加到不同的DOM层次结构中. 由于ng-controller指令会创建一个新的子作用域, 所以我们将得到一个存在继承关系的作用域树. 每一个控制器都会接收$scope对象, 这个$scope对象可以访问更高一级控制器中定义的属性和方法. 关于作用域继承机制更多信息见Understanding Scopes(理解作用域)

<div class="spicy">
	<div ng-controller="MainController">
		<p>Good {{timeOfDay}}, {{name}}!</p>
	
		<div ng-controller="ChildController">
			<p>Good {{timeOfDay}}, {{name}}!</p>
	
			<div ng-controller="GrandChildController">
				<p>Good {{timeOfDay}}, {{name}}!</p>
			</div>
		</div>
	</div>
</div>

var myApp = angular.module('scopeInheritance', []);
myApp.controller('MainController', ['$scope', function($scope) {
	$scope.timeOfDay = 'morning';
	$scope.name = 'Nikki';
}]);
myApp.controller('ChildController', ['$scope', function($scope) {
	$scope.name = 'Mattie';
}]);
myApp.controller('GrandChildController', ['$scope', function($scope) {
	$scope.timeOfDay = 'evening';
	$scope.name = 'Gingerbread Baby';
}]);

div.spicy div {
    padding: 10px;  
    border: solid 2px blue;
}

注意我们是怎样在模板中构建了三层ng-controller指令, 这实际上是为我们的视图创建了四层作用域:

root scope, 根作用域
MainController作用域, 包含timeOfDay和name属性
ChildController作用域, 继承了timeOfDay属性, 重写(隐藏)了父作用域中的name属性
GrandChildController作用域, 重写(隐藏)了定义在MainController控制器中的timeOfDay属性以及定义在ChildController控制器中的name属性

对于方法, 继承机制同样有效. 因此在上面示例中, 所有的属性可以被返回值为字符串的方法所代替.