理解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属性
对于方法, 继承机制同样有效. 因此在上面示例中, 所有的属性可以被返回值为字符串的方法所代替.