摘要：模塊和依賴注入細(xì)心的讀者可能已經(jīng)發(fā)現(xiàn)了，到目前為止所用到的例子都是使用的全局的構(gòu)造函數(shù)來定義控制器的。這非常的簡單，只需使用如下參數(shù)來調(diào)用即可控制器的名字字符串類型控制器的構(gòu)造函數(shù)全局定義的控制器構(gòu)造函數(shù)只適用于快速示例和原型開發(fā)。

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

書名：Mastering Web Application Development with AngularJS

  
Chapter 1

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

事實上，AngularJS 與 HTML 和 DOM 的聯(lián)系更為密切，因為它就是依賴瀏覽器來解析模版內(nèi)容的（就跟瀏覽器會對任何其他的HTML文檔所做的那樣）。在瀏覽器把標(biāo)記文本轉(zhuǎn)化為 DOM 樹之后，AngularJS就會進(jìn)入這個解析好的DOM結(jié)構(gòu)。然后，每當(dāng)遇到一個指令，AngularJS就會執(zhí)行它的邏輯，并將指令變?yōu)閯討B(tài)的內(nèi)容。

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

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

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

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

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

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

上面這個需求不是特別有挑戰(zhàn)性，也只是一個普通的文本表單，盡管如此，這里還是由于多需要整合的UI元素，比如，要確保按鈕的 disabled 禁用狀態(tài)可以正常工作，剩余字?jǐn)?shù)要用恰當(dāng)?shù)臉邮絹頊?zhǔn)確的顯示等等。首次嘗試的實現(xiàn)代碼如下：

           

               {{message}}
           
           

             Send
             Clear
           
   

我們還是使用前面的代碼作為起點，在那個基礎(chǔ)上繼續(xù)。首先，我們需要顯示剩余字?jǐn)?shù)，這個相當(dāng)容易，如下所示：

Remaining: {{remaining()}}

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

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

然后，我們需要在文本不符合字?jǐn)?shù)限制的時候禁用 Send 按鈕。這個可以用 ng-disabled 指令很容易的實現(xiàn)，如下：

Send

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

繼續(xù)回到我們的例子中來，我們還要確保剩余字?jǐn)?shù)的提示要在只剩下很少字?jǐn)?shù)的時候改變樣式。這是一個可以可實戰(zhàn)中學(xué)習(xí)另一個聲明式UI的例子的好機(jī)會。如下所示：

 
Remaining: {{remaining()}}

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

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

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

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

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

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

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

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

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

細(xì)心的讀者可能已經(jīng)發(fā)現(xiàn)了，到目前為止所用到的例子都是使用的全局的構(gòu)造函數(shù)來定義控制器的。但是，全局的狀態(tài)是邪惡的，它危及了應(yīng)用的結(jié)構(gòu)，讓代碼更難以維護(hù)，測試，和閱讀。AngularJS 絕不會建議使用全局狀態(tài)的。相反，它提供了一整套的 API，可以很方便的定義模塊，在這些模塊中注冊對象。

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

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

模塊化之后是這樣的：

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

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

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

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

  
全局定義的控制器構(gòu)造函數(shù)只適用于快速示例和原型開發(fā)。永遠(yuǎn)不要在大型的、真實的應(yīng)用中使用全局定義的控制器。

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

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

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