學習控制器

Understanding Controllers (控制器)

In Angular, a Controller is a JavaScript constructor function that is used to augment the Angular Scope.
When a Controller is attached to the DOM via the ng-controller directive, Angular will instantiate a new Controller object, using the specified Controller’s constructor function. A new child scope will be available as an injectable parameter to the Controller’s constructor function as $scope.

Use controllers to:

• Set up the initial state of the $scope object.
• Add behavior to the $scope object.

Do not use controllers to:

• Manipulate DOM ---- Controllers should contain only business logic. Putting any presentation logic into Controllers significantly affects its testability. Angular has data binding for most cases and directives to encapsulate manual DOM manipulation.
• Format input ---- Use angular form controls instead.
• Filter output ---- Use angular filters instead.
• Share code or state across controllers ---- Use angular services instead.
• Manage the life-cycle of other components (for example, to create service instances).

在Angular裏，控制器就是一個用來加強Scope的JavaScript的構造函數。 當一個控制器經過ng-controller指令被附在DOM上的時候，Angular就會用這個指定的構造函數，初始化一個新的控制器實例。同時，1個子scope會以$scope的名字的變量身份，被注入到新的構造函數裏。

這些狀況下你應該使用控制器：

• 設置$scope對象初始化狀態的時候；
• 向$scope對象添加行爲的時候。

這些狀況你不該該使用控制器：

• 操縱DOM的時候 ---- 控制器裏就應該只有業務邏輯。任何把展現的邏輯放進控制器的行爲，都會大大影響其可測試性。幾乎全部狀況下，操縱DOM的操做均可以被數據綁定和指令完成；
• 格式化輸入 ---- 用Angular提供的表單控制吧；
• 過濾輸出 ---- 用Angular的過濾器不是很棒？
• 在控制器間共享代碼和狀態 ---- 用Angular的服務好嗎？
• 管理其它組件的生命週期 (比方說建立服務實例)

---

Setting up the initial state of a $scope object

Typically, when you create an application you need to set up the initial state for the Angular $scope. You set up the initial state of a scope by attaching properties to the $scope object. The properties contain the view model (the model that will be presented by the view). All the $scope properties will be available to the template at the point in the DOM where the controller is registered.

照理說，每當你建立一個應用的時候，你須要爲$scope設置初始化狀態。怎麼設置？就是給$scope上掛一些屬性。這些屬性包含不少展現模型（view model）（就是給前面的view展現的模型model）。全部掛在$scope下的屬性，對於DOM上對應的這個控制器下的模板都是可見的（就是說，你要是在html裏掛了這個controller，js裏定義給這個controller的全部$scope下的屬性啊，方法啊，就均可以調用了）。

The following example demonstrates creating a GreetingController, which attaches a greeting property containing the string 'Hola!' to the $scope:

舉個栗子： 

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

名叫GreetingController的控制器裏，$scope下面掛了個屬性greeting，值是'Hola!'。（西語的Hello，感受本身萌萌噠）

We create an Angular Module, myApp, for our application. Then we add the controller's constructor function to the module using the .controller() method. This keeps the controller's constructor function out of the global scope.

We have used an inline injection annotation to explictly specify the dependency of the Controller on the $scope service provided by Angular.

咱們爲咱們的這個應用建立了一個Angular裏大名鼎鼎的模塊（Module），叫myApp。而後咱們用.controller()把控制器的構造函數添進了這個模塊裏去。這樣作就是不想讓控制器的構造函數變成全局變量。

We attach our controller to the DOM using the ng-controller directive. The greeting property can now be data-bound to the template:

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

而後就是用ng-controller把控制器掛DOM上，你看，綁定的數據能夠用了。

Adding Behavior to a Scope Object

In order to react to events or execute computation in the view we must provide behavior to the scope. We add behavior to the scope by attaching methods to the $scope object. These methods are then available to be called from the template/view.

The following example uses a Controller to add a method, which doubles a number, to the scope: 

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

Once the Controller has been attached to the DOM, the double method can be invoked in an Angular expression in the template: 

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

 

As discussed in the Concepts section of this guide, any objects (or primitives) assigned to the scope become model properties. Any methods assigned to the scope are available in the template/view, and can be invoked via angular expressions and ng event handler directives (e.g. ngClick). 

給Scope對象添加行爲（就是可調用的方法/函數嘛）

看代碼樣例便可

---

Using Controllers Correctly

In general, a Controller shouldn't try to do too much. It should contain only the business logic needed for a single view.

The most common way to keep Controllers slim is by encapsulating work that doesn't belong to controllers into services and then using these services in Controllers via dependency injection.

正確使用控制器

一般狀況下，不要在控制器裏幹太多事。控制器裏的業務邏輯應該只爲1個單一的視圖服務。

最多見的保持控制器內容最少的方法，是把不屬於控制器的工做封裝到服務裏去，而後在控制器裏經過依賴注入來調用。

Associating Controllers with Angular Scope Objects

You can associate Controllers with scope objects implicitly via the ngController directive or $route service.

Simple Spicy Controller Example（這個例子很簡單，看代碼便可）

To illustrate further how Controller components work in Angular, let's create a little app with the following components:

• A template with two buttons and a simple message

• A model consisting of a string named spice

• A Controller with two functions that set the value of spice

The message in our template contains a binding to the spice model which, by default, is set to string "very". Depending on which button is clicked, the spice model is set to chili or jala, and the message is automatically updated by data-binding.

index.html:

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

app.js:

 1 var myApp = angular.module('spicyApp1', []);
 2 myApp.controller('SpicyController', ['$scope', function($scope) { 
 3     $scope.spice = "very"; 
 4     $scope.chiliSpicy = function() { 
 5         $scope.spice = "chili"; 
 6     }; 
 7     $scope.jalaSpicy = function() { 
 8         $scope.spice = "jala"; 
 9     };
10 }]);

Things to notice in the example above:

• The ng-controller directive is used to (implicitly) create a scope for our template, and the scope is augmented (managed) by the SpicyController Controller.

• SpicyController is just a plain JavaScript function. As an (optional) naming convention the name starts with capital letter and ends with "Controller".

• Assigning a property to $scope creates or updates the model.

• Controller methods can be created through direct assignment to scope (see the chiliSpicy method)

• The Controller methods and properties are available in the template (for both the <div> element and its children).

這個例子裏值得注意的地方：

• ng-controller指令會爲模板生成一個scope，而後這個scope就由這個叫作SpicyController的控制器來監管；

• 咱們有個命名規範（你不必定要遵照）就是：控制器都大寫開頭，屁股上掛Controller結尾；

• 給$scope的屬性賦值的話，會建立一個model（這樣前面的template就能夠用了），若是這貨已經存在，那就是更新它的值；

• 控制器的方法能夠直接掛在$scope下

• 控制器裏的方法和屬性均可以在模板上調用（so easy）
  

Spicy Arguments Example (能夠傳參的一個例子)

Controller methods can also take arguments, as demonstrated in the following variation of the previous example.

index.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>

app.js:

1 var myApp = angular.module('spicyApp2', []);
2 myApp.controller('SpicyController', ['$scope', function($scope) {
3     $scope.customSpice = 'wasabi';
4     $scope.spice = 'very';
5     $scope.spicy = function(spice) {
6         $scope.spice = spice;
7     };
8 }]);

.... .... .... ....

Scope Inheritance Example

It is common to attach Controllers at different levels of the DOM hierarchy. Since the ng-controller directive creates a new child scope, we get a hierarchy of scopes that inherit from each other. The $scope that each Controller receives will have access to properties and methods defined by Controllers higher up the hierarchy. 

Scope繼承的例子

咱們常常在DOM的不一樣位置掛載控制器。既然控制器能夠建立子scope，顯然（由於DOM是樹狀的），咱們就有了一個樹狀結構的scope們。每一個控制器拿到本身的$scope的時候，它也就能夠訪問比這個scope更高的scope下的屬性和方法。

index.html:

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

app.css:

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

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 = 'Matti' ;
 8 }]);
 9 myApp . controller ( 'GrandChildController' , [ '$scope' , function ( $scope ) {
10    $scope . timeOfDay = 'evening' ;
11    $scope . name = 'Gingerbread baby' ;
12 }]);

Notice how we nested three ng-controller directives in our template. This will result in four scopes being created for our view:

• The root scope

• The MainController scope, which contains timeOfDay and name properties

• The ChildController scope, which inherits the timeOfDay property but overrides (hides) the name property from the previous

• The GrandChildController scope, which overrides (hides) both the timeOfDay defined in MainController and the name property defined in ChilidController

Inheritance works with methods in the same way as it does with properties. So in our previous examples, all of the properties could be replaced with methods that return string values.

繼承對方法也是有效的，跟它對於屬性的影響是同樣同樣的。因此，上面的例子雖然都寫的是屬性，換成方法照樣管用。