在介紹完Angular中的表達式后重付，接下來我們再來介紹下Angular中一個重要角色——控制器顷级。其實，在前面的章節(jié)中我們也多次提到它确垫，那么蚪拦，Angular中的控制器到底是什么榴捡？它又能實現(xiàn)哪些功能呢？接下來我們結合示例來逐一進行解析。
控制器的概念
? ? ? ?控制器(controller)在Angular中占有重要的地位抓韩，它是組成前端MVC框架的其中一員，在Angular中踪蹬，控制器的功能是管理頁面的邏輯代碼篷牌。當控制器通過“ng-controller”指令被添加到DOM頁面時，Angular將會通過控制器構造函數(shù)生成一個實體的對象，而在生成這個對象的過程中控硼，$scope對象作為參數(shù)注入其中泽论，并允許用戶訪問$scope對象，這樣一來卡乾，用戶可以通過$scope對象與頁面中的元素進行數(shù)據(jù)綁定翼悴，從而實現(xiàn)數(shù)據(jù)從控制器層到視圖層的過程。
控制器初始化$scope對象
? ? ? ?從上面對控制器的介紹幔妨，我們不難看出鹦赎，控制器的任務就是操作$scope對象，而這種操作具體表現(xiàn)在兩個方面：一是對$scope對象進行初始化误堡，二是為$scope對象添加各種實現(xiàn)邏輯功能的方法古话。我們首先來看第一個功能，初始化$scope對象埂伦。
? ? ? ? ?接下來煞额，我們先通過一個完整的示例來介紹控制器初始化$scope對象的過程。
示例2-4 控制器初始化$scope對象
(1) 功能描述
? ? ? ? 在頁面中沾谜，以應用模塊的方法構建一個控制器對象膊毁，并以內(nèi)聯(lián)聲明方式表明控制器對象依賴于$scope對象提供的服務。在控制器對象中基跑，初始化$scope一個名為“text”的屬性婚温，并與頁面的<span>元素進行數(shù)據(jù)綁定。
(2) 實現(xiàn)代碼
? ? ? ? 新建一個HTML文件2-4.html媳否，加入如代碼清單2-4所示的代碼栅螟。
代碼清單2-4控制器初始化$scope對象
<!doctype html>
<html ng-app="a2_4">
<head>
? ? <title>控制器初始化$scope對象</title>
? ? <script src="../Script/angular.min.js"?
? ? ? ? ? ? type="text/javascript"></script>
</head>
<body>
? ? <div ng-controller="c2_4">
? ? ? ? <span>{{text}}</span>?
? ? </div>
? ? <script type="text/javascript">
? ? ? ? var a2_4 = angular.module('a2_4', []);
? ? ? ? a2_4.controller('c2_4', ['$scope', function ($scope) {
? ? ? ? ? ? $scope.text = 'Hello！Angular';
? ? ? ? }]);
? ? </script>
</body>
</html>
(3) 頁面效果
? ? ? ? 執(zhí)行HTML文件2-4.html篱竭，最終實現(xiàn)的頁面效果如下圖2-4所示：
圖2-4控制器初始化$scope對象
(4) 源碼分析
? ? ? ? 在本示例的源碼中力图，自定義控制器函數(shù)由全局方式改為在Angular模塊下使用 . controller方式創(chuàng)建，這種方式更加強調頁面是一個整體的應用掺逼，控制器可以對應用中的某一個模塊進行管理吃媒。相對于全局方式下的定義，該方式的擴展性和針對性更強吕喘。
在本示例的源碼中赘那，我們首先定義了一個名為“a2_4”的Angular模塊，然后氯质，通過下列代碼募舟，創(chuàng)建了一個名為“c2_4”的控制器：
a2_4.controller('c2_4', ['$scope', function ($scope) {
? ? ? ? ? ? ...代碼塊
}]);
? ? ? ? ?在上述的代碼中，采用內(nèi)聯(lián)注入的方式聲明“c2_4”控制器的構建依賴Angular中的$scope對象闻察，即在構建控制器時拱礁，Angular會自動將$scope對象作為參數(shù)注入到控制器中琢锋。
? ? ? ? ?雖然在構建控制器函數(shù)時，$scope對象已經(jīng)自動注入觅彰，但還是需要對它進行初始化吩蔑，而初始化的方法是通過向該對象添加屬性，在本示例中的代碼如下：
$scope.text = 'Hello填抬！Angular';
? ? ? ? ?采用上述方式也可以添加多個屬性烛芬，被添加的這些屬性在控制器所管理的所有DOM元素中都可以采用數(shù)據(jù)綁定的方式進行訪問，例如飒责， 對于下列代碼：
<div ng-controller="c2_4">
? ? ? ? <span>{{text}}</span>?
</div>
? ? ? ? ?通過元素的“ng-controller”屬性值指定控制器函數(shù)的名稱赘娄，表明該元素中的全部DOM節(jié)點都受控制器管理，然后宏蛉，采用雙花括號的方式綁定控制器的數(shù)據(jù)遣臼，從而最終實現(xiàn)View層數(shù)據(jù)展示的功能。
