溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
1.MVC中的控制器
AngularJS的控制器主要為了把模型和視圖連接在一起。大多數業務邏輯操作都會放在視圖對應的控制器中。當然如果我們能夠把業務邏輯放到后端的REST服務中，就可以開發輕量級AngularJS應用。
涉及到多個控制器中使用的業務邏輯，需要放到一個公共的服務中，然后把改服務注入使用到該業務邏輯的控制器中。
2.理解控制器
在AngularJS的控制器中，構造函數會有$scope參數。當一個控制器通過ng-controller指令連接到DOM上，Angular將實例化一個新的控制器對象，然后調用指定的控制器的構造函數。一個新的子作用范圍(scope)將被創建，并作為一種可注入的參數傳遞給控制器的構造函數為$scope。
如果控制器使用controller as語法附加到DOM上，那么控制器實例將被分配給新的$scope范圍。并且多了一個和as同名的屬性，然后把自己指向這個屬性，就方便我們訪問了。
3.控制器的作用
3.1 在控制器中初始化模型(添加屬性)
創建控制器并將它附加到DOM元素之后，AngularJS會創建一個子作用域。子作用域保存著對應控制器的數據模型。子作用域可以通過$scope來獲取。
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>AngularJS Controller Demo</title>
<script type="text/javascript" src="angular.min.js">
</script>
<script src="app.js" charset="utf-8"></script>
</head>
<body ng-controller="MainController">
<p>{{username}}</p>
<p>{{age}}</p>
</body>
</html>
(function () {
'use strict';
angular.module("myApp", [])
.controller('MainController', ['$scope', function ($scope) {
$scope.username="leeli";
$scope.age=28;
}]);
})();
3.2 在控制器中附件行為(添加事件或方法)
附加行為的方式是把方法或事件添加到$scope對象上，以便在控制器對應的視圖中使用到改方法。也有很多方法是處理業務的，也是附加到$scope對象上。
ng-click對應的事件方法在controller里面定義為addItem，所以在視圖上我們可以使用addItem方法。
視圖上的ng-click、ng-model和ng-repeat都是AngularJS的內置指令，后續博客會詳細介紹。
4.控制器作用域
因為控制器是附加到DOM元素上，所以存在著一個視圖，有多個控制器。控制器之間可以是并列的，也可以是嵌套的形式存在。
4.1 視圖中控制器并列
各個控制器從附加DOM元素節點開始，到節點對應閉合標簽結束的地方創建了一個子控制域，單個控制器里面的$scope對象只能訪問和調用該控制器范圍內的屬性和方法。
4.2 視圖中控制器嵌套
默認情況下，AngularJS在當前作用域中無法找到某個屬性,就會在父級作用域中進行查找。即子級控制器會繼承父級控制器中的對象。但是子級作用域和父級作用域中有相同的屬性，子級使用自己的作用域。這個時候子級作用域要訪問父級作用域的屬性可以通過$parent。類似JavaScript本身的原型鏈方式。
5.何為ControllerAs
AngularJS提供$scope方式來處理Controller。代碼如下：
<div ng-app="myApp">
<div ng-controller="MainController">
<p>Hello {{ name }}</p>
</div>
</div>
var app = angular.module('myApp', []);
app.controller('MainController', ['$scope',function($scope) {
$scope.name = "world.";
}]);
AngularJS處理Controller提供一種作用域別名的方式，其實就是將Model直接綁定Controller的實例上。
代碼如下：
<div ng-app="myApp">
<div ng-controller="MainController as mainCtrl">
<p>Hello {{ name }}</p>
</div>
</div>
var app = angular.module('myApp', []);
app.controller('MainController', function() {
this.name = "world.";
});
使用這種方式處理Controller有3個好處：
1 Controller的定義不再依賴$scope,Controller就是一個普通的函數定義，這樣代碼于框架無關，假設哪天不使用AngularJS框架，這里的代碼可以進行復用和移植。
2 測試更友好，不需要開發者去模擬一個$scope
3 增強代碼的可讀性。在控制器并行和嵌套的demo中，視圖上我們都使用花括號包含著name,userName等屬性。如果有多個控制器并行，或者多個層級的嵌套，我們有時很難區分在視圖上使用時哪個控制器下的屬性，可以使用ControllerAs來避免這個問題。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
