AngularJS入門教學（二）：AngularJS模板_AngularJS

是時候給這些網頁點動態特性了－用AngularJS！我們這裡為後面要加入的控制器新增了一個測試。

一個應用的程式碼架構有很多種。對於AngularJS應用，我們鼓勵使用模型-視圖-控制器（MVC）模式解耦程式碼和分離關注點。考慮到這一點，我們用AngularJS來為我們的應用添加一些模型、視圖和控制器。

請重設工作目錄：

複製程式碼 程式碼如下:

git checkout -f step-2

我們的應用程式現在有了一個包含三支手機的清單。

步驟1和步驟2之間最重要的差異在下面列出。你可以到GitHub去看完整的差別。

視圖與範本

在AngularJS中，一個視圖是模型透過HTML**模板**渲染之後的映射。這意味著，無論模型何時發生變化，AngularJS會即時更新結合點，隨之更新視圖。

例如，視圖元件被AngularJS用下面這個模板建構出來：

複製程式碼 程式碼如下:

  ...
 
 

 

   
• 
        {{phone.name}}
     

  {{phone.snippet}}

  
     

 

我們剛剛把靜態編碼的手機列表替換掉了，因為這裡我們使用ngRepeat指令和兩個用花括號包裹起來的AngularJS表達式－{{phone.name}}和{{phone.snippet}} ——能達到同樣的效果。

1.在

標籤裡面的ng-repeat="phone in phones"語句是一個AngularJS迭代器。這個迭代器告訴AngularJS用第一個

標籤作為模板為列表中的每一部手機創建一個

元素。

2.如我們在步驟0時學到的，包裹在phone.name和phone.snippet周圍的花括號標識著資料綁定。和常數計算不同的是，這裡的表達式其實是我們應用的一個資料模型引用，這些我們在PhoneListCtrl控制器裡面都設定好了。

模型與控制器

在PhoneListCtrl控制器裡面初始化了資料模型（這裡只不過是一個包含了數組的函數，數組中儲存的物件是手機資料列表）：

app/js/controller.js:

複製程式碼 程式碼如下:

function PhoneListCtrl($scope) {
  $scope.phones = [
    {"name": "Nexus S",
     "snippet": "Fast just got faster with Nexus S."},
    {"name": "Motorola XOOM™ with Wi-Fi",
     "snippet": "The Next, Next Generation tablet."},
    {"name": "MOTOROLA XOOM™",
     "snippet": "The Next, Next Generation tablet."}
  ];
}

儘管控制器看起來並沒有起到什麼控制的作用，但是它在這裡起到了至關重要的作用。透過給定我們資料模型的語境，控制器允許我們建立模型和視圖之間的資料綁定。我們是這樣把表現層，數據和邏輯部件連結在一起的：

1.PhoneListCtrl－控制器方法的名字（在JS檔案controllers.js中）和

標籤裡面的ngController指令的值相符。

2.手機的資料此時與注入到我們控制器函數的作用域（$scope）相關聯。當應用程式啟動之後，會有一個根作用域被建立出來，而控制器的作用域是根作用域的一個典型後繼。這個控制器的作用域對所有

標記內部的資料綁定有效。

AngularJS的作用域理論非常重要：一個作用域可以視為模板、模型和控制器協同工作的黏接器。 AngularJS使用作用域，同時也有模板中的信息，資料模型和控制器。這些可以幫助模型和視圖分離，但是他們兩者確實是同步的！任何對於模型的變更都會即時反映在視圖上；任何在視圖上的變更都會立刻體現在模型中。

想要更深入理解AngularJS的作用域，請參考AngularJS作用域文件。

檢定

「AngularJS方式」讓開發時程式碼測試變得十分簡單。讓我們來瞅一眼下面這個為控制器新添加的單元測試：

test/unit/controllersSpec.js:

複製程式碼 程式碼如下:

describe('PhoneCat controllers', function() {

  describe('PhoneListCtrl', function(){

    it('should create "phones" model with 3 phones', function() {
      var scope = {},
      ctrl = new PhoneListCtrl(scope);

      expect(scope.phones.length).toBe(3);
    });
  });
});

這個測試驗證了我們的手機陣列裡面有三筆記錄（暫時不用弄清楚這個測試腳本）。這個範例顯示出為AngularJS的程式碼建立一個單元測試是多麼的容易。正因為測試在軟體開發中是必不可少的環節，所以我們使得在AngularJS可以輕易地建立測試，來鼓勵開發者多寫它們。

在寫入測驗的時候，AngularJS的開發者傾向於使用Jasmine行為驅動開發（BBD）框架中的語法。儘管An​​gularJS沒有強迫你使用Jasmine，但是我們在教程裡面所有的測試都使用Jasmine編寫。你可以在Jasmine的官方首頁或Jasmine Wiki上獲得相關知識。

基於AngularJS的項目被預先配置為使用JsTestDriver來運行單元測試。

你可以像下面這樣執行測試：

1.在一個單獨的終端機上，進入到angular-phonecat目錄並且運行./scripts/test-server.sh來啟動測試（Windows命令行下請輸入.scriptstest-server.bat來運行腳本，後面腳本指令運作方式類似）；
2.開啟一個新的瀏覽器窗口，並且前往http://localhost:9876 ；
3.選擇“Capture this browser in strict mode”。

這個時候，你可以拋開你的窗口不管然後把這事忘了。 JsTestDriver會自己把測試跑完並且把結果輸出在你的終端機裡。

4.執行./scripts/test.sh進行測試 。

你應當看到類似如下的結果：

複製程式碼 程式碼如下:

Chrome: Runner reset.
.
Total 1 tests (Passed: 1; Fails: 0; Errors: 0) (2.00 ms)
  Chrome 19.0.1084.36 Mac OS: Run 1 tests (Passed: 1; Fails: 0; Errors 0) (2.00 ms)

耶！測試通過了！或沒有... 注意：如果在你執行測試之後發生了錯誤，關閉瀏覽器然後回到終端關閉了腳本，然後在重新來一邊上面的步驟。

練習

為index.html新增另一個資料綁定。例如：

複製程式碼 程式碼如下:

Total number of phones: {{phones.length}}

建立一個新的資料模型屬性，並且把它綁定到模板上。例如：

複製程式碼 程式碼如下:

$scope.hello = "Hello, World!"

更新你的瀏覽器，確保顯示出來「Hello, World!」

用一個迭代器建立一個簡單的表：

複製程式碼 程式碼如下:

   
   

row number

{{i}}

現在讓資料模型表達式的i增加1：

複製程式碼 程式碼如下:

   
   

row number

{{i 1}}

確定把toBe(3)改成toBe(4)之後單元測試失敗，然後重新跑一遍./scripts/test.sh腳本

總結

你現在擁有一個模型，視圖，控制器分離的動態應用了，並且你隨時進行了測試。現在，你可以進入到步驟3來為應用程式加入全文檢索功能了。