摘要：模塊和依賴注入細心的讀者可能已經發現了，到目前為止所用到的例子都是使用的全局的構造函數來定義控制器的。這非常的簡單，只需使用如下參數來調用即可控制器的名字字符串類型控制器的構造函數全局定義的控制器構造函數只適用于快速示例和原型開發。

上一篇：【譯】《精通使用AngularJS開發Web App》（三）
下一篇：

書名：Mastering Web Application Development with AngularJS

  
Chapter 1

我們已經見了這許多AngularJS模版的例子，應該認識到他并不是“又出現一個模板語言”，但確實還是有許多的不同（跟其他模板語言相比）。不僅是說框架的模板語法依賴于HTML，還允許我們來擴展HTML的詞匯，而且還有可以在沒有任何人工干預的情況下刷新局部視圖這種的獨一無二的能力！

事實上，AngularJS 與 HTML 和 DOM 的聯系更為密切，因為它就是依賴瀏覽器來解析模版內容的（就跟瀏覽器會對任何其他的HTML文檔所做的那樣）。在瀏覽器把標記文本轉化為 DOM 樹之后，AngularJS就會進入這個解析好的DOM結構。然后，每當遇到一個指令，AngularJS就會執行它的邏輯，并將指令變為動態的內容。

  
既然AngularJS 依賴于瀏覽器來解析模板，我們就需要確保提供的模板是合格的HTML內容。要特別注意HTML標簽的正確閉合（否則的話，不會輸出錯誤信息，但視圖卻不會被正確的渲染出來）。AngularJS 必須在正確的DOM樹上工作。

AngularJS 使得豐富HTML的詞匯表成為可能（我們可以添加新的屬性或HTML元素，并教會瀏覽器應該如何解析他們）。這就像在 HTML 基礎上創建一門特定領域語言（domain-specific language），并指導瀏覽器如何理解新的指令。你可能經常會聽到AngularJS“教了瀏覽器一些新的技巧”。

聲明式模板視圖 - 勢在必行的控制器邏輯

AngularJS自帶了很多方便的指令，我們將會在后面的章節中涵蓋其中的大部分。最重要的事情，其實不是去了解單個指令的語法和功能，而是 AnulgarJS 構建 UI 的背后的哲學思想。

AngularJS 推廣了一套聲明式的構建 UI 的方式。在實踐中這意味著，模板會把重心放在如何描述一個期望的效果，而不是如何具體實現它。聽起來可能有點困惑，那就看個例子吧。

讓我們想象一下這種情況，我們需要創建一個form，用戶可以輸入一些簡短的文字，然后可以點擊按鈕發送表單。當然這還涉及到一些用戶體驗的事情，比如文字長度需要限制在100字以內，如果超出范圍就禁用 發送 按鈕。用戶需要在他們輸入的時候知道還剩多少個字。如果剩余的字數小于10，那么提示文字就要改變樣式為警告的狀態。也需要能夠清除已經存在的文字。完成后的form可能看起來如下圖：

上面這個需求不是特別有挑戰性，也只是一個普通的文本表單，盡管如此，這里還是由于多需要整合的UI元素，比如，要確保按鈕的 disabled 禁用狀態可以正常工作，剩余字數要用恰當的樣式來準確的顯示等等。首次嘗試的實現代碼如下：

           

               {{message}}
           
           

             Send
             Clear
           
   

我們還是使用前面的代碼作為起點，在那個基礎上繼續。首先，我們需要顯示剩余字數，這個相當容易，如下所示：

Remaining: {{remaining()}}

remaining() 函數定義在 TextAreaWithLimitCtrl 控制器中的 $scope 上，如下：

$scope.remaining = function () {
    return MAX_LEN - $scope.message.length;
};

然后，我們需要在文本不符合字數限制的時候禁用 Send 按鈕。這個可以用 ng-disabled 指令很容易的實現，如下：

Send

這里使用了一個固定模式。要操作UI的話，只需接觸模板的一小部分，然后根據模型的狀態（這里就是文本的長度）描述一個期望的輸出結果（顯示剩余字數，禁用按鈕等）即可。最有意思的地方在于，我們不需在 JavaScript 代碼中持有任何對DOM元素的引用，我們也不需要準確的操控DOM元素。現在我們只需關注模型的變化，讓 AngularJS 去做那些枯燥繁重的工作去吧。我們所需要做的只是在這種形式的指令中提供一些建議。

繼續回到我們的例子中來，我們還要確保剩余字數的提示要在只剩下很少字數的時候改變樣式。這是一個可以可實戰中學習另一個聲明式UI的例子的好機會。如下所示：

 
Remaining: {{remaining()}}

shouldWarn() 方法的實現如下所示：

$scope.shouldWarn = function () {
    return $scope.remaining() < WARN_THRESHOLD; 
};

CSS class 的變化是根據模型的變化而來的，但是我們并沒有在 JavaScript 中寫任何的操作 DOM 的代碼！UI 會基于以聲明的方式表達的“想要干嘛”而重繪。我們用 ng-class 指令所表達的意思是：“每次字數超出限制，都要通過把 text-warning 加到 元素的 class 上面 來給用戶一個警示”。這跟下面這種說法是相當不同的 “當輸入一個新的字符，并且字數超出了限制，就去找到 元素，然后改變這個元素的 CSS class text-warning”。（譯注：兩種不同的思路，前一種是描述你所希望的狀態，后一種是完全的把你要實現這種結果的過程描述出來）。

我們這里說的好像只是有點微妙的不同，但其實，聲明式的和命令式的是兩種相當對立的實現方式。命令式的編程，重點在于描述每一個多帶帶的過程，并將結果導向希望得到的結果。聲明式的方式，重點在于希望得到的結果。至于要達到這個結果的那些獨立的步驟是由支持這種方式的框架所關心的。這就像是在說“親愛的 AngularJS，這就是當模型到某個狀態之后，我所希望的UI能夠展示的狀態，現在呢，就請開始想想什么時候以及如何來重繪這些UI吧”。

聲明式的編程通常更富有表達力，因為把開發人員從非常細微的、底層的指令（編碼）中解放出來了。產出的代碼通常都非常的簡潔、易于閱讀。但若要在工作中使用聲明的方式，就必須有裝備工具能夠正確的理解更高級的指令。我們的程序開始依賴于這些機器的決定，并且我們需要放棄一些底層的控制權。使用命令式的方式，我們擁有完全的控制權，也能很好的協調好每一個多帶帶的操作。我們得到了更多的控制權，這種“負責任”的代價就是要寫非常多的底層的、重復的代碼。

熟悉 SQL 語言的讀者會覺得這些聽起來都非常的熟悉（SQL 是一個針對請求臨時(adhoc)數據的非常富有表達力的聲明式的語言）。我們簡單的描述一下需要得到的結果（去fetch的數據），之后的就是去讓（關系型）數據庫去想該怎么去拿到特定的數據了。絕大多數情況下，這個過程都能完美的工作，我們也能很快速的拿到我們所想得到的。當然也有一些情況需要給出更多的提示（索引(indexes)，查詢計劃提示(query planner hints)等等），或者手動控制數據檢索過程，以便優化性能。

AngularJS模板中的指令聲明式的描述了所期望的結果，所以呢，我們得以從一步步的給出如果改變DOM元素的各個屬性（基于 jQuery 的應用通常需要如此）中解脫出來。AngularJS 極力推廣在模板上使用聲明式的編程，而在javascript代碼中是用命令式的（控制器和業務邏輯）。使用 AngularJS的話，我們很少會使用到低級的、命令式的指令來操作DOM（唯一的例外是在指令里面中的代碼）。

  
就經驗而言，千萬不要在 AngularJS控制器中操作 DOM 元素。在控制器中獲取一個DOM的引用，并操作DOM的屬性，是在用命令式的方式控制UI -- 這是跟 AugularJS 構建 UI 的思想相悖的。

使用 AngularJS 指令寫出來的聲明式的 UI 模板可以很迅速的描述出復雜的、交互的UI。AngularJS 會自主做出所有這些底層決定何時以及如何操作DOM樹的部分。絕大多數時候 AngularJS 會做出“正確的事情”，并更新UI為所預期的(也非常及時的)。不過，理解 AngularJS 的內部工作原理也非常的重要，這樣的話我們就可以在需要的時候給框架一些適當的提示。這里的情況跟 SQL 又非常的相似，大多數情況下，我們都不需要為查詢計劃的工作情況操心。但當我們遇到性能問題的時候，了解查詢計劃是如何下決定的就非常有價值了，這樣一來我們就可以給它提供更多的意見。這同樣適用于 AngularJS 的UI 管理：我們需要了解背后的機制，以便于更高效的使用模板和指令。

細心的讀者可能已經發現了，到目前為止所用到的例子都是使用的全局的構造函數來定義控制器的。但是，全局的狀態是邪惡的，它危及了應用的結構，讓代碼更難以維護，測試，和閱讀。AngularJS 絕不會建議使用全局狀態的。相反，它提供了一整套的 API，可以很方便的定義模塊，在這些模塊中注冊對象。

我么一起來看看怎么把一個丑陋的，全局定義的控制器轉換為同等的模塊化的定義。之前的控制器是這么聲明的：

var HelloCtrl = function ($scope) { 
    $scope.name = "World";
}

模塊化之后是這樣的：

angular.module("hello", []) 
    .controller("HelloCtrl", function($scope){
        $scope.name = "World";
    });

AngularJS 自身定義了一個全局的 angular 名字空間。這個名字空間提供了很多不同類型的工具和方便的方法，module 就是這些方法的其中一個。module 會扮演一個其他的AngularJS需要管理的對象（控制器、服務等）的容器。正如我們之后就會看到的，除了簡單的名稱空間和代碼組織之外，模塊還有非常多的東西需要學習。

要定義一個新的模塊，我們需要給 module 方法的第一個參數提供模塊的名字。第二個參數指定所需要依賴的模塊（在之前的模塊中，我們沒有依賴與任何其他模塊）。

對 angular.module 方法的調用會返回一個新創建的模塊的實例。一旦我們是用這個實例，就可以開始定義新的控制器了。這非常的簡單，只需使用如下參數來調用 controller 即可：
- 控制器的名字（字符串類型）
- 控制器的構造函數

  
全局定義的控制器構造函數只適用于快速示例和原型開發。永遠不要在大型的、真實的應用中使用全局定義的控制器。

現在已經定義了一個模塊，但我們還需要通知 AngularJS 它的存在。這是通過給 ng-app 屬性提供一個值來完成的，如下：

  
一個經常犯的錯誤就是忘記了在 ng-app 屬性中指定模塊的名字，這也會造成一些常見的困惑。在 ng-app 屬性中省略模塊名稱會引起錯誤，說明有未定義的控制器。

轉載請注明來自[超2真人]
本文鏈接：http://www.peichao01.com/static_content/doc/html/Mastering_Web_Application_Development_with_AngularJS_4.html