AngularJS讲义-控制器

时间：2016-07-21 18:01:21 阅读：221 评论：0 收藏：0 [点我收藏+]

标签：

在Angular中，控制器（Controller）就是基于JavaScript的构造方法，主要用来构造模型并建立模型和视图之间的数据绑定。控制器里面定义了应用程序的逻辑和行为。

通过ng-controller指令可以将控制器和DOM绑定起来。Angular会用定义过的控制器构造函数实例化一个控制器对象，在Angular应用(module)启动的时候，会创建一个根作用域, Angular实例化每个控制器时会创建一个新的子作用域并作为可注入参数($scope)注入到控制器的构造方法中.

在理解控制器作用的基础上，我们应当按照约定使用控制器：

1. 初始化$scope.

2. 在$scope中增加应用的行为。

尽量避免在如下场景中使用控制器：

1.操作DOM - 控制器主要包含业务逻辑。把视图逻辑放到控制器中会严重影响代码的可测试性。Angular已经将绝大部分侦听器和DOM操作逻辑加以封装在数据绑定和指令(directives)中。

2. 格式化输入 - 尽量用angular form controls取代。

3. 格式化或者过滤输出 - 考虑使用Angular的过滤器(filters).

4. 实现共享代码片段，或者管理多个控制器之间的状态 - 考虑使用service组件来管理

5. 管理其他组件的生命周期（例如创建service组件实例）

初始化$scope对象的状态

但创建一个应用时，我们通常需要通过设置$scope的属性来初始化Angular $scope的状态。这些属性(properties)包含了视图模型。$scope的属性在控制器所绑定的DOM范围内的模板(template)是可见的。

例如:

Js代码

1 var myApp = angular.module(‘myApp‘,[]);    
2 myApp.controller(‘GreetingController‘, [‘$scope‘, function($scope) {  
3   $scope.greeting = ‘Hola!‘;  
4 }]);

这里创建了一个‘myApp‘的应用模块，并定义了‘GreetingController’控制器，接下来我们通过ng-controller指令将控制器绑定到相应的div上：

Html代码

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

这样我们就可以通过{{greeting}}表达式得到greeting属性的值。

给Scope对象赋予行为

我们可以给scope对象添加方法,这样就可以在绑定的视图或者模板中调用这些方法来响应事件或者执行一些计算任务. 让我们看下面的例子:

Js代码

1 var myApp = angular.module(‘myApp‘,[]);  
2   
3 myApp.controller(‘DoubleController‘, [‘$scope‘, function($scope) {  
4   $scope.double = function(value) { return value * 2; };  
5 }]);

这段JS代码中，我们给scope添加了double方法，然后我们将控制器添加到DOM中：

Html代码

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

这样我们就可通过表达式调用scope的double方法。正如我们在基本概念一节中讲述的，定义在scope中的属性可以作为模型数据被绑定，同时定义在scope中的方法也可以被表达式或者ng事件指令调用，例如ngClick.

正确使用控制器

简言之,控制器中一般只包含视图相关的业务逻辑. 我们可以和视图无关的代码及公用代码封装在service中,通过在构造器中注入依赖的方式来使用services. 我们将会在稍后的章节中详解依赖注入机制.

关联控制器和Scope对象

我们可以通过ngController指令和$route service来关联控制器和Scope对象.

接下来我们通过代码范例帮助大家更好地理解Angular控制器的工作原理。我们将创建一个简单的app包含三个部分：

1. 一个模板(template) 包含了一个消息和两个按钮。

2. 一个模型(Model)包含一个名叫spice的属性。

3. 一个控制器包含了两个方法设置spice的值。

template code (index.html)

Html代码

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

app.js(定义了控制器)

Js代码

 1 var myApp = angular.module(‘spicyApp1‘, []);  
 3 myApp.controller(‘SpicyController‘, [‘$scope‘, function($scope) {  
 4     $scope.spice = ‘very‘;  
 5   
 6     $scope.chiliSpicy = function() {  
 7         $scope.spice = ‘chili‘;  
 8     };  
10     $scope.jalapenoSpicy = function() {  
11         $scope.spice = ‘jalapeño‘;  
12     };  
13 }]);

我们可以看到，模板中的消息通过表达式绑定到spice属性，spice被初始化为"very"，随后我们有通过ng-click绑定了scope中的两个方法，分别修改了spice的值，但我们点击按钮时，消息会被自动刷新。

初始化页面：

技术分享

点击Chili后，消息自动更新：

技术分享
让我们总结一下以上实例：

1. Angular通过ng-controller隐式的给模板创建了一个作用域(scope),这个作用域被SpicyController扩充。

2. SpicyController是一个普通的JavaScript函数。通常Controller名字首字母大写，以Controller为后缀。

3. 通过给$scope里面的属性赋值来创建或者更新模型。

4. Controller的方法可以直接定义为$scope的方法。

5. 可以在与控制器关联的<div>以及子元素中通过模板中的表达式以及ng事件指令访问控制器的方法和属性。

实例二：为控制器方法添加参数，参数可以引用model

Html代码

1 <div ng-controller="SpicyController">  
2  <input ng-model="customSpice">  
3  <button ng-click="spicy(‘chili‘)">Chili</button>  
4  <button ng-click="spicy(customSpice)">Custom spice</button>  
5  <p>The food is {{spice}} spicy!</p>  
6 </div>

Java代码

 1 var myApp = angular.module(‘spicyApp2‘, []);  
 3 myApp.controller(‘SpicyController‘, [‘$scope‘, function($scope) {  
 4     $scope.customSpice = "wasabi";  
 5     $scope.spice = ‘very‘;  
 7     $scope.spicy = function(spice) {  
 8         $scope.spice = spice;  
 9     };  
10 }]);  
11

在这个例子中我们注意到ng-click绑定的方法中添加了参数，参数为模型spice的值，同时输入文本框也绑定到spice属性，但在输入文本框里面键入spice的值，点击‘Custom Spice’ 按钮， message中spiced的值会被替换成文本框中的值。

技术分享

实例三：作用域的继承关系

我们可以把控制器关联到不同的DOM层级。由于ng-controller指令会自动创建子作用域，所以作用域也有相应的层级关系。子作用域中可访问上级作用域中的属性和方法，上级作用域的同名属性和方法将被子作用域隐藏。让我们结合代码来理解：

index.html

Index.html代码

 1 <div class="spicy">  
 2   <div ng-controller="MainController">  
 3     <p>Good {{timeOfDay}}, {{name}}!</p>  
 4   
 5     <div ng-controller="ChildController">  
 6       <p>Good {{timeOfDay}}, {{name}}!</p>  
 7   
 8       <div ng-controller="GrandChildController">  
 9         <p>Good {{timeOfDay}}, {{name}}!</p>  
10       </div>  
11     </div>  
12   </div>  
13 </div>

app.css

App.css代码

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

app.js

App.js代码

 1 var myApp = angular.module(‘scopeInheritance‘, []);  
 2 myApp.controller(‘MainController‘, [‘$scope‘, function($scope) {  
 3   $scope.timeOfDay = ‘morning‘;  
 4   $scope.name = ‘Nikki‘;  
 5 }]);  
 6 myApp.controller(‘ChildController‘, [‘$scope‘, function($scope) {  
 7   $scope.name = ‘Mattie‘;  
 8 }]);  
 9 myApp.controller(‘GrandChildController‘, [‘$scope‘, function($scope) {  
10   $scope.timeOfDay = ‘evening‘;  
11   $scope.name = ‘Gingerbread Baby‘;  
12 }]);

运行结果：

技术分享