摘要：本書的這一部分將為隨后的章節(jié)打下基礎(chǔ)，會涵蓋模板，模塊化，和依賴注入。本書的小例子中我們會使用未經(jīng)壓縮的，開發(fā)友好的版本，在的上。作用域也可以針對特定的視圖來擴(kuò)展數(shù)據(jù)和特定的功能。

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

原版書名：Mastering Web Application Development with AngularJS

  
Chapter 1

現(xiàn)在我們已經(jīng)知道了到哪兒去找框架的源碼，以及相關(guān)的文檔，現(xiàn)在我們就可以開始編碼了，在實戰(zhàn)中看看AngularJS究竟是什么樣子的。
本書的這一部分將為隨后的章節(jié)打下基礎(chǔ)，會涵蓋 AngularJS模板，模塊化，和依賴注入。任何的AngularJS web app 都是由這些基礎(chǔ)組建而成的。

我們對AngularJS的第一印象就用典型的 Hello, World! 來演示，看看用AngularJS是如何來寫的，同時也看看它所使用的語法。

    


    
Hello, {{name}}

首先需要引入AngularJS，這樣才能在瀏覽器中正確運(yùn)行。這就像AngularJS一樣簡單，它最簡單的形式就是引用一個javascript文件。

  
AngularJS 相對來說還是比較小的：壓縮并gzip之后大概只有30KB，壓縮不gzip的話大概有80KB。它并不依賴任何第三方類庫。

  本書的小例子中我們會使用未經(jīng)壓縮的，開發(fā)友好的版本，在Google的CDN上。同時AngularJS的所有版本都可以在這里下載到：http://code.angularjs.org

在實際運(yùn)行中，僅僅把AngularJS包含進(jìn)來還不夠，我們還需要啟動這個小應(yīng)用。最簡單的方式就是使用自定義的屬性 ng-app 。

標(biāo)簽附近可以看到另一個非標(biāo)準(zhǔn)的 HTML 屬性：ng-init。我們可以使用 ng-init 在模板被渲染之前來初始化模型。最后要說到的就是 {{name}} 表達(dá)式，它就是簡單的把模型的值給渲染出來了而已。

即便是在這最開始的、最簡單的小例子中，也可以看到AngularJS模板系統(tǒng)的一些重要特性，如下所示：
- 自定義的 HTML 標(biāo)簽和屬性可以給本來是靜態(tài)的 HTML 文檔增添動態(tài)行為。
- 兩個花括號（{{expression}}）是一個用來輸出模型值的表達(dá)式的定界符。
在 AngularJS 中，所有的可以被框架所理解和解析的特殊的 HTML 標(biāo)簽和屬性都是指令（directive）。

對 AngularJS 來說，渲染模板簡直就是最拿手的工作了；特別是當(dāng)要構(gòu)建一個動態(tài)web 應(yīng)用的時候，AngularJS簡直就能發(fā)光升仙了。為了讓咱們能欣賞到 AngularJS 的真正的力量，我們就用 input 來擴(kuò)展一下之前的 Hello World，如下所示：

    Say hello to:　
    
Hello, {{name}}

這個 input 標(biāo)簽處了額外的 ng-model 之外簡直就毫無特別之處。真正的魔法力量將會在我們在input 中輸入文字的時候展現(xiàn)。突然之間，屏幕會在每次鍵盤敲擊之后進(jìn)行重繪，顯示出你所敲打的名字！要刷新一個模板，你并不需要編寫任何一行代碼，我們也沒有被強(qiáng)迫調(diào)用任何一個框架的 API 來更新數(shù)據(jù)模型。AngularJS 是足夠聰明的，可以自動檢測到模型的變化并相應(yīng)的更新DOM。

大多數(shù)的傳統(tǒng)的模板系統(tǒng)渲染模板時都是線性的，單向的：模型（變量）和模板被拼合在一起并將計算的結(jié)果輸出。模型的任何改變都需要模板的重新計算。AngularJS無需如此，因為任何的用戶引起的視圖變化，都會立即映射到對應(yīng)的模型中，同時，任何模型的變化也會馬上傳播到模板中去。

大部分現(xiàn)存的web應(yīng)用都是構(gòu)建在知名的 模型-視圖-控制器（MVC） 模式的某種形式之上。但是 MVC 最大的問題在于，它本身并不是一個非常清晰的模式，而是很高階很結(jié)構(gòu)化的。更糟糕的是，最原始的模式又變異、衍生出很多種模式（最知名的可能是 MVP 和 MVVM）。要加入這些混亂的、不同的框架，開發(fā)人員常常會對這些模式做出不同的理解和解釋。這樣的結(jié)果就是，用著相同的 MVC 的名號，卻在描述一個不同的架構(gòu)和編碼實現(xiàn)。Martin Fowler 在他很優(yōu)秀的關(guān)于GUI架構(gòu)的文章中對此有很好的總結(jié)（http://martinfowler.com/eaaDev/uiArchs.html）。

  
就拿 模型-視圖-控制器 來說，它經(jīng)常被拿來當(dāng)作一個模式來說事，但我卻不覺得把它當(dāng)做一個模式是個什么好事，因為它本身包含了很多不同的思路。不同的人看到 MVC 不同的地方會得出不同的結(jié)論，并成他們的理解為 "MVC"。如果這還沒有造成足夠的混亂，那你終將會從 根據(jù)對 MVC 的誤解而開發(fā)的像 Chinese whispers(一個耳語傳話的游戲，詳見這里) 一樣的系統(tǒng) 中看到最后的效果。

AngularJS團(tuán)隊本著非常務(wù)實的態(tài)度來整個MVC模式家族，并宣稱這個框架是基于MVW（模型-視圖-隨便你是啥）模式的。一般說來只有在實踐中見識到來能感受到（究竟如何）。

我們到現(xiàn)在為止所見到的 Hello World都還沒有使用任何的分層策略：數(shù)據(jù)初始化，邏輯，還有視圖都混在一個文件之中。在任何實際的應(yīng)用中，我們都需要把更多的注意力放在分配給每層的那些責(zé)任上面。幸運(yùn)的是，AngularJS提供了一些不同的構(gòu)建方式，可以正確地構(gòu)建更加復(fù)雜的應(yīng)用。

  
本書后面的例子都會省略掉 AngularJS 的初始化代碼（引入腳本，ng-app 屬性，等等），這樣更利于閱讀。

我們一起來看看這個稍微修改過的 Hello World：

    Say hello to: 

    
Hello, {{name}}!

ng-init 屬性被移除了，然后我們增加了一個新的 ng-controller 指令，以及對應(yīng)著一個 JavaScript 函數(shù)。這個 HelloCtrl 還接受一個相當(dāng)神秘的 $scope 作為參數(shù)：

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

Scope（作用域）

AngularJS中的 $scope 對象在這里就是要將 域模型 暴露給視圖（模板）。只需把屬性設(shè)置給 scope 實例，就可以在模板渲染時得到這個值。

Scopes（作用域）也可以針對特定的視圖來擴(kuò)展數(shù)據(jù)和特定的功能。只要在 scope 實例上定義一些函數(shù)就能將特定的 UI 邏輯暴露給模板了。

例如，你可以給 name 變量創(chuàng)建一個 getter 方法，如下所示：

var HelloCtrl = function ($scope) {
   $scope.getName = function() {
      return $scope.name;
   };
}

然后就像下面這樣在模板中使用：

Hello, {{getName()}} !

$scope對象讓我們可以非常精確的控制這個域內(nèi)的模型的哪一部分，以及哪些操作在視圖層是可用的。理論上來講，AngularJS的 scopes 非常類似于 MVVM 模式的 ViewModel。

控制器

控制器的首要任務(wù)就是初始化scope對象。在實踐中，初始化的邏輯由下面的這些責(zé)任組成：
- 提供模型初始化的值
- 擴(kuò)展 $scope 的 UI 行為（方法）
控制器都是普通的 JavaScript 函數(shù)。他們并不必去繼承一些框架特定提供的類，也不必去調(diào)用任何特定的 AngularJS API才能去正確的執(zhí)行他們的任務(wù)。

  
請注意，控制器在設(shè)置模型的初始值時是跟 ng-init指令所做的任務(wù)一樣的。有了控制器，才使得使用 JavaScript 來表達(dá)初始化的邏輯成為可能，而不必拿代碼把HTML模版搞的一團(tuán)糟。

模型

AngularJS 的模型就是那些普通的 JavaScript 對象。我們不必被強(qiáng)迫去繼承一些框架的基礎(chǔ)類，也不必以某種特殊的方式來初始化模型對象。

使用任何現(xiàn)有的，純JavaScript類或?qū)ο螅透谀Ｐ蛯右粯拥娜ナ褂盟鼈円彩强梢缘?。同時也沒有被限制說只能使用最原始的值來做模型屬性（任何合法的JavaScript 對象或數(shù)組都可以使用）。要把模型暴露給 AngularJS，你只需把它賦值給 $scope 的屬性即可。

  
AngularJS不是侵入式的，所以可以放心的把任何針對其他框架特定的代碼拿來當(dāng)作模型使用。

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