《AngularJS深度剖析與最佳實踐》一 2.4 控制器

本節書摘來自華章出版社《angularjs深度剖析與最佳實踐》一書中的第2章，第2.4節，作者 雪狼 破狼 彭洪偉，更多章節内容可以通路雲栖社群“華章計算機”公衆号檢視

和傳統的mvc程式中一樣，angular中的控制器（controller）用來對子產品（scope）進行操作，包括初始化資料和定義事件響應函數等。

我們常見的定義控制器的方法是：angular.module('com.ngnice.app').controller ('userlistctrl', function() {...});，其中：angular.module('com.ngnice.app')語句在前面已經講過，是傳回一個現有的module執行個體，而controller就是這個module執行個體上的一個方法，它的作用是把後面的函數以userlistctrl為名字，注冊到子產品中去，以便需要時可以根據名字找到它。

使用控制器的場景有幾種。最常見的是用在路由中。

比如在angular-ui-router中，我們可以通過下面的語句使用它：

這樣，當使用者通路/user/list這個url的時候，angular-ui-router插件就會執行個體化一個名為userlistctrl的控制器，同時，建立一個scope對象并傳給它。這個控制器執行個體會在這個scope對象上建立屬性、方法等，這個過程稱為“初始化scope對象”。

初始化完之後，加載模闆，并且把scope對象傳入，模闆中會通過angular指令綁定這些屬性、方法。angular會通過一個稱為摘要循環（digest cycle）的過程，自動維護scope變量和視圖中dom節點的一緻性，這時候的dom我們稱之為“活dom（live dom）”。更具體的工作原理我們會在第3章“背後的原理”的3.2節“angular啟動過程”中詳細講解。

另一個常用的場景是在單元測試中。

通常，在單元測試階段我們不必測試視圖，而是将其留待端到端測試階段。在單元測試階段，我們要關注的是控制器的工作邏輯。前面我們提過，控制器的作用是在scope對象上建立屬性、方法，是以我們的測試邏輯就是看它是否建立了正确的屬性，以及由它建立的方法是否能正常工作。

于是我們得出了下列測試邏輯：

其中的$controller是angular提供的一個系統服務，用來查找以前通過module.controller('userlistctrl', function() {...});注冊的控制器函數。

還有一個不常用但值得提倡的場景是在指令中，特别是用來封裝一個界面片段的“元件型指令”，我們在2.6節“指令”中會進一步展開講解。之是以在這種類型的指令中提倡使用控制器，主要是為了友善進行單元測試，而不用引入對視圖層的測試。

有一些第三方服務或指令也會使用控制器，它們所做的工作實際上和angular-ui-router一樣的：建立一個scope，找到一個控制器，然後用控制器對scope進行初始化，最後把scope綁定到視圖，把生成的live dom渲染出來。

掌握了控制器的工作原理，在自己的代碼中也可以靈活運用，凡是需要live dom的地方都可以通過各種形式使用。

生成live dom時涉及另一個重要的知識點$compile，完整的實作方式我會在後面2.6節“指令”中講解。