控制器

控制器在AngularJS中的作用是增強檢視。
AngularJS中的控制器是一個函式，用來向檢視的作用域中新增額外的功能。我們用它來給作用域物件設定初始狀態，並新增自定義行為。
當我們在頁面上建立一個新的控制器時，AngularJS會生成並傳遞一個新的$scope給這個控制器。可以在這個控制器裡初始化scope。由於AngularJS會負責處理控制器的例項化過程，我們只需編寫建構函式即可。下面的例子展示了控制器初始化：

function FirstController($scope) {
$scope.message = "hello";
}

細心的讀者會發現，我們是在全域性作用域中建立的這個函式。這樣做並不合適，因為會汙染全域性名稱空間。更合理的方式是建立一個模組，然後在模組中建立控制器，如下所示：

var app = angular.module('app', []);
app.controller('FirstController', function($scope) {
$scope.message = "hello";
});

只需建立控制器作用域中的函式，就能建立可以在檢視中使用的自定義操作。很幸運，AngularJS允許我們在檢視中像呼叫普通資料一樣呼叫$scope上的函式。

用內建指令ng-click可以將按鈕、連結等其他任何DOM元素同點擊事件進行繫結。ng-click指令將瀏覽器中的mouseup事件，同設定在DOM元素上的事件處理程式繫結在一起（例如，當瀏覽器在某個DOM元素上觸發了點選事件，函式就會被呼叫）。和前面的例子類似，繫結看起來是這樣的：

<div ng-controller="FirstController">
<h4>The simplest adding machine ever</h4>
<button ng-click="add(1)" class="button">Add</button>
<a ng-click="subtract(1)" class="button alert">Subtract</a>
<h4>Current count: {{ counter }}</h4>
</div>

按鈕和連結都被繫結在了內部$scope的一個操作上，當點選任何一個元素時AngularJS都會呼叫相應的方法。注意，當設定呼叫哪個函式時，會同時用括號傳遞一個引數（add(1)）。
下面給FirstController新增一個操作：

app.controller('FirstController', function($scope) {
$scope.counter = 0;
$scope.add = function(amount) { $scope.counter += amount; };
$scope.subtract = function(amount) { $scope.counter -= amount; };
});

控制器可以將與一個獨立檢視相關的業務邏輯封裝在一個獨立的容器中。儘可能地精簡控制器是很好的做法。作為AngularJS開發者，使用依賴注入來訪問服務可以實現這個目的。

AngularJS同其他JavaScript框架最主要的一個區別就是，控制器並不適合用來執行DOM操作、格式化或資料操作，以及除儲存資料模型之外的狀態維護操作。它只是檢視和$scope之間的橋樑。

控制器巢狀（作用域包含作用域）

預設情況下，AngularJS在當前作用域中無法找到某個屬性時，便會在父級作用域中進行查詢。如果AngularJS找不到對應的屬性，會順著父級作用域一直向上尋找，直到抵達$rootScope為止。如果在rootScope中也找不到，程式會繼續執行，但檢視無法更新。

通過例子來看一下這個行為。建立一個ParentController，其中包含一個user物件，再建立一個ChildController來引用這個物件：

app.controller('ParentController', function($scope) {
$scope.person = {greeted: false};
});
app.controller('ChildController', function($scope) {
$scope.sayHello = function() {
$scope.person.name = 'Ari Lerner';
};
});

如果我們將ChildController置於ParentController內部，那ChildController的$scope物件的父級作用域就是ParentController的scope物件。根據原型繼承的機制，我們可以在子作用域中訪問ParentController的scope物件。

例如，我們可以在ChildController的DOM元素中訪問定義在ParentController中的person物件

<div ng-controller="ParentController">
<div ng-controller="ChildController">
<a ng-click="sayHello()">Say hello</a>
</div>
{{ person }}
</div>

我們看到，點選按鈕時，可以在ChildController中訪問ParentController中$scope.person的值，就好像person物件定義在ChildController的scope中一樣。

控制器應該儘可能保持短小精悍，而在控制器中進行DOM操作和資料操作則是一個不好的實踐。

設計良好的應用會將複雜的邏輯放到指令和服務中。通過使用指令和服務，我們可以將控制器重構成一個輕量且更易維護的形式
簡潔的控制器：

angular.module('myApp', [])
.controller('MyController', function($scope,UserSrv) {
// 內容可以被指令控制
$scope.onLogin = function(user) {
UserSrv.runLogin(user);
};
});

表示式

前面已經見過使用表示式的示例。用{{ }}符號將一個變數繫結到$scope上的寫法本質上就是一個表示式：{{ expression }}。當用watch進行監聽時，AngularJS會對錶達式或函式進行運算。
表示式和eval(javascript)非常相似，但是由於表示式由AngularJS來處理，它們有以下顯著不同的特性:

1. 所有的表示式都在其所屬的作用域內部執行，並有訪問本地$scope的許可權；
2. 如果表示式發生了TypeError和ReferenceError並不會丟擲異常；
3. 不允許使用任何流程控制功能（條件控制，例如if/else）；
4. 可以接受過濾器和過濾器鏈。

對錶達式進行的任何操作，都會在其所屬的作用域內部執行，因此可以在表示式內部呼叫那些限制在此作用域內的變數，並進行迴圈、函式呼叫、將變數應用到數學表示式中等操作。

解析AngularJS 表示式

儘管AngularJS會在執行$digest迴圈的過程中自動解析表示式，但有時手動解析表示式也是非常有用的。

AngularJS通過$parse這個內部服務來進行表示式的運算，這個服務能夠訪問當前所處的作用域。

將$parse服務注入到控制器中，然後呼叫它就可以實現手動解析表示式。舉例來說，如果頁面上有一個輸入框繫結到了expr變數上，如下所示：

<div ng-controller="MyController">
<input ng-model="expr" type="text" 
placeholder="Enter an expression" />
<h2>{{ parseValue }}</h2>
</div>

我們可以在MyController中給expr這個表示式設定一個$watch並解析它：

angular.module("myApp", [])
.controller('MyController',
function($scope,$parse) {
$scope.$watch('expr', function(newVal, oldVal, scope) {
if (newVal !== oldVal) {
// 用該表示式設定parseFun
var parseFun = $parse(newVal);
// 獲取經過解析後表示式的值
$scope.parsedValue = parseFun(scope);
}
});
});

插值字串

在AngularJS中，我們的確有手動執行模板編譯的能力。例如，插值允許基於作用域上的某個條件實時更新文字字串。

要在字串模板中做插值操作，需要在你的物件中注入$interpolate服務。在下面的例子中，我們將會將它注入到一個控制器中：

angular.module('myApp', []).controller('MyController',
function($scope, $interpolate) {
// 我們同時擁有訪問$scope和$interpolate服務的許可權
});

$interpolate服務是一個可以接受三個引數的函式，其中第一個引數是必需的。

1. text（字串）：一個包含字元插值標記的字串。
2. mustHaveExpression（布林型）：如果將這個引數設為true，當傳入的字串中不含有表示式時會返回null。
3. trustedContext（字串）：AngularJS會對已經進行過字元插值操作的字串通過$sec.getTrusted()方法進行嚴格的上下文轉義。

$interpolate服務返回一個函式，用來在特定的上下文中運算表示式。
設定好這些引數後，就可以在控制器中進行字元插值的操作了。例如，假設我們希望可以在電子郵件的正文中進行實時編輯，當文字發生變化時進行字元插值操作並將結果展示出來。

<div ng-controller="MyController">
<input ng-model="to"
type="email"
placeholder="Recipient" />
<textarea ng-model="emailBody"></textarea>
<pre>{{ previewText }}</pre>
</div>

由於控制器內部設定了一個需要每次變化都重新進行字元插值的自定義輸入欄位，因此需要設定一個$watch來監聽資料的變化。

簡而言之，$watch函式會監視scope上的某個屬性。只要屬性發生變化就會呼叫對應的函式。可以使用watch函式在scope上某個屬性發生變化時直接執行一個自定義函式。

在控制器中，我們設定了$watch來監視郵件正文的變化，並將emailBody屬性的值進行字元插值後的結果賦值給previewText屬性。

angular.module('myApp', [])
.controller('MyController', function($scope, $interpolate) {
// 設定監聽
$scope.$watch('emailBody', function(body) {
if (body) {
var template = $interpolate(body);
$scope.previewText =
template({to: $scope.to});
}
};
});
在

現在，在{{ previewText }}內部的文字中可以將{{ to }}當做一個變數來使用，並對文字的變化進行實時更新。

用startSymbol()方法可以修改標識開始的符號。這個方法接受一個引數。

用endSymbol()方法可以修改標識結束的符號。這個方法也接受一個引數。

如果要修改這兩個符號的設定，需要在建立新模組時將$interpolateProvider注入進去。

angular.module('emailParser', [])
.config(['$interpolateProvider', function($interpolateProvider) {
$interpolateProvider.startSymbol('__');
$interpolateProvider.endSymbol('__');
}])
.factory('EmailParser', ['$interpolate', function($interpolate) {
// 處理解析的服務
return {
parse: function(text, context) {
var template = $interpolate(text);
return template(context);
}
};
}]);

現在，我們已經建立了一個模組，可以將它注入到應用中，並在郵件正文的文字中執行這個郵件解析器：

angular.module('myApp', ['emailParser'])
.controller('MyController', ['$scope', 'EmailParser',
function($scope, EmailParser) {
// 設定監聽
$scope.$watch('emailBody', function(body) {
if (body) {
$scope.previewText = EmailParser.parse(body, {
to: $scope.to
});
}
});
}]);

現在用自定義的 __ 符號取代預設語法中的 {{ }} 符號來請求插值文字。
由於我們將表示式開始和結束的符號都設定成了__，因此需要將HTML修改成用這個符號取代{{ }}的版本，

<div id="emailEditor">
<input ng-model="to"
type="email"
placeholder="Recipient" />
<textarea ng-model="emailBody"></textarea>
</div>
<div id="emailPreview">
<pre>__ previewText __</pre>
</div>