第一篇筆記有說到，AngularJS 是遵循 MVC 的框架，而當中 Controller 的部分主要是來處理 view 與 model 之間的事件，這篇就來簡單的介紹 Controller。
在 Controller 中，我們可以對 Model 進行一些資料處理，而當資料經過處理後的變動，也能夠反應到 View 上，達到 AngularJS 的雙向資料繫結 (Two Way Data-Binding)。
馬上來實做一個簡單的例子，在畫面上有兩個 input，分別可以輸入書名以及書的價格，而存放資料的部分 (Model) 會經過 Controller 處理過後在畫面上 (View) 會顯示出書名及判斷出價格我們買不買得起，目前是設定超過 500 元就太貴買不起啦!
完成後的畫面就會如下所示：
接下來就一步一步來做看看吧!!
首先準備好基本的 html，程式碼如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<title>AngularJS - Controller</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div class="well">
<label>Book Name:</label>
<input type="text" placeholder="Enter a book name here">
<br>
<label>Price:</label>
<input type="text" placeholder="Enter a price here">
<hr>
<h3>書名：</h3>
<h3>價格：(元)</h3>
</div>
</body>
</html>
接著幫 div 加上 ng-app=”myApp” 屬性，讓 AngularJS 知道要處理的範圍，然後來設定 Model 的部分，Book Name 底下的 input 加上 ng-model 屬性，變數名稱(值)給予 bookName，Price 底下的 input 也加上 ng-model 屬性，變數名稱(值)給予 price，在要顯示的 <h3> 標籤裡分別放入設定好的 {{bookName}} 與 {{price}} 。
這部分完成後的程式碼如下：
1
2
3
4
5
6
7
8
9
10
<div class="well" ng-app="myApp">
<label>Book Name:</label>
<input type="text" ng-model="bookName" placeholder="Enter a book name here">
<br>
<label>Price:</label>
<input type="text" ng-model="price" placeholder="Enter a price here">
<hr>
<h3>書名：{{bookName}} </h3>
<h3>價格：{{price}} (元)</h3>
</div>
這時候在 input 輸入的文字就會即時更新在畫面上了，再來就是本篇的主角 Controller 要出場了，如果我們要針對 Model 做額外的處理，就要在 Controller 裡解決，這也是 Controller 所扮演的角色。
在 AngularJS 裡，如何使用 Controller 呢?
我們幫 div 加上 ng-controller=”bookCtrl” 的屬性，這樣表示在這個 div 區塊中的 ng-model 都是屬於 bookCtrl 的處理範圍。
這時候 div 的屬性如下所示：
1
<div class="well" ng-app="myApp" ng-controller="bookCtrl">
接著就可以開始寫 Controller 的部分了，要初始化資料或是做資料處理的部份就是在這邊完成。 先看看程式碼：
1
2
3
4
5
6
7
8
9
<script>
//Contrllor
var app = angular.module("myApp", []);
app.controller('bookCtrl', function ($scope) {
//資料初始化及資料處理的程式碼寫在這
});
</script>
在命名為 bookCtrl 的 controller 裡面，有一個 AngularJS 在建立 controller 時，會產生的物件，叫做 $scope，他是用來代表應用程式的 Model，所以我們可以透過 $scope 讓 Model 在 controller 中進行處理，我們就先來做資料初始化吧。
1
2
3
4
5
6
7
8
9
10
<script>
//Contrllor
var app = angular.module("myApp", []);
app.controller('bookCtrl', function ($scope) {
$scope.bookName = "AngularJS";
$scope.price = 500;
});
</script>
我們透過 Contrllor 設定 Model 的初始值，所以這時候畫面上一開始就可以看到書名是 AngularJS，價格是 500 元，接著就要做一開始所說的功能，當書的價格小於 500 時，我們就可以買來讀，超過 500 就太貴買不起啦!! 接著就來寫這個簡單的判斷吧。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
//Contrllor
var app = angular.module("myApp", []);
app.controller('bookCtrl', function ($scope) {
$scope.bookName = "AngularJS";
$scope.price = 500;
$scope.result;
// 用 $watch 來監聽 price 的變化
$scope.$watch('price', function () {
if ($scope.price >= 501) {
$scope.result = "一本 " + $scope.price + " 元，太貴了買不起！";
} else {
$scope.result = "一本 " + $scope.price + " 元，買來讀吧！";
}
});
});
</script>
我們在 $scope 裡再建立一個 result 物件，拿來儲存最後我們要顯示出來的資料組合(string)，然後利用 $watch 來監聽 Model 的資料變化，當資料有變動時就會觸發事件，controller 的工作就大功告成啦!!
還沒結束! 別忘了 result 還沒有新增到 View 上面，所以記得在 html 的部分再加上一個 <h3> 標籤，而內容當然就是 result 嘍。 加上去 {{result}} 後的 html 程式碼如下：
1
2
3
4
5
6
7
8
9
10
11
<div class="well" ng-app="myApp" ng-controller="bookCtrl">
<label>Book Name:</label>
<input type="text" ng-model="bookName" placeholder="Enter a book name here">
<br>
<label>Price:</label>
<input type="text" ng-model="price" placeholder="Enter a price here">
<hr>
<h3>書名：{{bookName}}</h3>
<h3>價格：{{price}} (元)</h3>
<h3> {{result}} </h3>
</div>
這樣這個簡單的範例就完成了。
