5. AngularJS模板

2019-07-12 11:09 更新

是時候給這些網(wǎng)頁來點動態(tài)特性了——用AngularJS!我們這里為后面要加入的控制器添加了一個測試。

一個應用的代碼架構有很多種。對于AngularJS應用,我們鼓勵使用模型-視圖-控制器(MVC)模式解耦代碼和分離關注點??紤]到這一點,我們用AngularJS來為我們的應用添加一些模型、視圖和控制器。

請重置工作目錄:

git checkout -f step-2

我們的應用現(xiàn)在有了一個包含三部手機的列表。

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

視圖和模板

在AngularJS中,一個視圖是模型通過HTML模板渲染之后的映射。這意味著,不論模型什么時候發(fā)生變化,AngularJS會實時更新結合點,隨之更新視圖。

比如,視圖組件被AngularJS用下面這個模板構建出來:

<html ng-app>
<head>
  ...
  <script src="angular.js"></script>
  <script src="controllers.js"></script>
</head>
<body ng-controller="PhoneListCtrl">

  <ul>
    <li ng-repeat="phone in phones">
      {{phone.name}}
    <p>{{phone.snippet}}</p>
    </li>
  </ul>
</body>
</html>

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

  • <li>標簽里面的ng-repeat="phone in phones"語句是一個AngularJS迭代器。這個迭代器告訴AngularJS用第一個<li>標簽作為模板為列表中的每一部手機創(chuàng)建一個<li>元素。
  • 正如我們在第0步時學到的,包裹在phone.namephone.snippet周圍的花括號標識著數(shù)據(jù)綁定。和常量計算不同的是,這里的表達式實際上是我們應用的一個數(shù)據(jù)模型引用,這些我們在PhoneListCtrl控制器里面都設置好了。

模型和控制器

PhoneListCtrl控制器里面初始化了數(shù)據(jù)模型(這里只不過是一個包含了數(shù)組的函數(shù),數(shù)組中存儲的對象是手機數(shù)據(jù)列表):

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."}
  ];
}

盡管控制器看起來并沒有起到什么控制的作用,但是它在這里起到了至關重要的作用。通過給定我們數(shù)據(jù)模型的語境,控制器允許我們建立模型和視圖之間的數(shù)據(jù)綁定。我們是這樣把表現(xiàn)層,數(shù)據(jù)和邏輯部件聯(lián)系在一起的:

  • PhoneListCtrl——控制器方法的名字(在JS文件controllers.js中)和<body>標簽里面的ngController指令的值相匹配。
  • 手機的數(shù)據(jù)此時與注入到我們控制器函數(shù)的作用域($scope)相關聯(lián)。當應用啟動之后,會有一個根作用域被創(chuàng)建出來,而控制器的作用域是根作用域的一個典型后繼。這個控制器的作用域對所有<body ng-controller="PhoneListCtrl">標記內部的數(shù)據(jù)綁定有效。

AngularJS的作用域理論非常重要:一個作用域可以視作模板、模型和控制器協(xié)同工作的粘接器。AngularJS使用作用域,同時還有模板中的信息,數(shù)據(jù)模型和控制器。這些可以幫助模型和視圖分離,但是他們兩者確實是同步的!任何對于模型的更改都會即時反映在視圖上;任何在視圖上的更改都會被立刻體現(xiàn)在模型中。

想要更加深入理解AngularJS的作用域,請參看AngularJS作用域文檔

測試

“AngularJS方式”讓開發(fā)時代碼測試變得十分簡單。讓我們來瞅一眼下面這個為控制器新添加的單元測試:

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);
    });
  });
});

這個測試驗證了我們的手機數(shù)組里面有三條記錄(暫時無需弄明白這個測試腳本)。這個例子顯示出為AngularJS的代碼創(chuàng)建一個單元測試是多么的容易。正因為測試在軟件開發(fā)中是必不可少的環(huán)節(jié),所以我們使得在AngularJS可以輕易地構建測試,來鼓勵開發(fā)者多寫它們。

在寫測試的時候,AngularJS的開發(fā)者傾向于使用Jasmine行為驅動開發(fā)(BBD)框架中的語法。盡管AngularJS沒有強迫你使用Jasmine,但是我們在教程里面所有的測試都使用Jasmine編寫。你可以在Jasmine的官方主頁或者Jasmine Wiki上獲得相關知識。

基于AngularJS的項目被預先配置為使用JsTestDriver來運行單元測試。你可以像下面這樣運行測試:

  1. 在一個單獨的終端上,進入到angular-phonecat目錄并且運行./scripts/test-server.sh來啟動測試(Windows命令行下請輸入.\scripts\test-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)

    耶!測試通過了!或者沒有...
    注意:如果在你運行測試之后發(fā)生了錯誤,關閉瀏覽器然后回到終端關了腳本,然后在重新來一邊上面的步驟。

練習

  • index.html添加另一個數(shù)據(jù)綁定。例如:

      <p>Total number of phones: {{phones.length}}</p>
  • 創(chuàng)建一個新的數(shù)據(jù)模型屬性,并且把它綁定到模板上。例如:

      $scope.hello = "Hello, World!"

    更新你的瀏覽器,確保顯示出來“Hello, World!”

  • 用一個迭代器創(chuàng)建一個簡單的表:

      <table>
          <tr><th>row number</th></tr>
          <tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"><td>{{i}}</td></tr>
      </table>

    現(xiàn)在讓數(shù)據(jù)模型表達式的i增加1:

      <table>
          <tr><th>row number</th></tr>
          <tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"><td>{{i+1}}</td></tr>
      </table>
  • 確定把toBe(3)改成toBe(4)之后單元測試失敗,然后重新跑一遍./scripts/test.sh腳本

總結

你現(xiàn)在擁有一個模型,視圖,控制器分離的動態(tài)應用了,并且你隨時進行了測試?,F(xiàn)在,你可以進入到步驟3來為應用加入全文檢索功能了。

以上內容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號