通過上一節(jié)中的HelloWorld的示例，大家應(yīng)該對AngularJS的語法有了一些了解，前面我說過，AngularJS是 MVC體系結(jié)構(gòu)，今天就來介紹一下AngularJS的控制器（Controller），它負(fù)責(zé)響應(yīng)于用戶輸入并執(zhí)行交互數(shù)據(jù)模型對象。

開發(fā)環(huán)境

Sublime Text（建議使用）
AngularJS-1.5.6

AngularJS控制器

不多說，直接上代碼

//html代碼
<div ng-app="count">
        <h1>兩個數(shù)的相加</h1>
        <div id="add" ng-controller="add">
            加法：
            <input type="text" ng-model="one" placeholder="0">
            ＋
            <input type="text" ng-model="two" placeholder="0">
            ＝ {{one*1 + two*1}}
        </div>  
</div>

新建一個js文件，可以命名為controller.js，也可以直接在html文件中寫js代碼，我習(xí)慣將js代碼寫在js文件里。

//javascript代碼
angular.module('count',[])
.controller('add',function($scope){
    $scope.one = 0;
    $scope.two = 0;
})

或

//javascript代碼
var app = angular.module('count',[]);
app.controller('add',function($scope){
    $scope.one = 0;
    $scope.two = 0;
})

代碼解釋：
從代碼上可以看出來，這個Demo的功能是計(jì)算兩個數(shù)相加。

我們先來看一下javascript代碼，

創(chuàng)建一個模塊：

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

這段代碼是創(chuàng)建一個module應(yīng)用模塊，名為count，第二個參數(shù)是它的依賴模塊列表，我們這里創(chuàng)建了一個獨(dú)立的模塊。

創(chuàng)建一個控制器：

app.controller('add',function($scope){
    $scope.one = 0;
    $scope.two = 0;
})

創(chuàng)建一個屬于名為count模塊的控制器，控制器的名稱為add，一個應(yīng)用模塊可以包含多個控制器。構(gòu)造函數(shù)可以獲取$scope 對象，$scope用于存儲所有controller 暴露的接口和方法，$scope會被Angular傳遞到視圖和指令層。在本例中，$scope會接收視圖中的one和two模型，然后再把這個兩個參數(shù)傳回視圖。

下面在來看下html代碼

ng-app指令：

<div ng-app="count">

之前介紹過ng-app這個指令，在本例中，ng-app的作用域是局部，并且，指定了一個count模塊，意指在這個作用域中，只有count這個模塊中的controller才會起作用。

ng-controller指令：

<div id="add" ng-controller="add">

ng-controller有些類似于ng-app的作用，是控制器的作用范圍。付給ng-controller的值，是指定一個控制器，如前面js代碼中定義的控制器“add”。

ng-model和雙大括號表達(dá)式{{}}在上一節(jié)中已經(jīng)介紹過了，這一節(jié)就不在另做說明了。

給大家留個疑問，雙大括號表達(dá)式為什么要寫成

 {{one*1 + two*1}}