一個(gè)應(yīng)用的代碼架構(gòu)有很多種。對(duì)于AngularJS應(yīng)用，我們鼓勵(lì)使用模型-視圖-控制器（MVC）模式解耦代碼和分離關(guān)注點(diǎn)?？紤]到這一點(diǎn)，我們用AngularJS來(lái)為我們的應(yīng)用添加一些模型、視圖和控制器。

請(qǐng)重置工作目錄：

    git checkout -f step-2

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

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

視圖和模板

在AngularJS中，一個(gè)視圖是模型通過(guò)HTML模板渲染之后的映射。這意味著，不論模型什么時(shí)候發(fā)生變化，AngularJS會(huì)實(shí)時(shí)更新結(jié)合點(diǎn)，隨之更新視圖。

比如，視圖組件被AngularJS用下面這個(gè)模板構(gòu)建出來(lái)：

    <html ng-app>
    <head>
        ...
        <script src="lib/angular/angular.js"></script>
        <script src="js/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)編碼的手機(jī)列表替換掉了，因?yàn)檫@里我們使用ngRepeat指令和兩個(gè)用花括號(hào)包裹起來(lái)的AngularJS表達(dá)式——{{phone.name}}和{{phone.snippet}}——能達(dá)到同樣的效果。

在<li>標(biāo)簽里面的ng-repeat="phone in phones"語(yǔ)句是一個(gè)AngularJS迭代器。這個(gè)迭代器告訴AngularJS用第一個(gè)<li>標(biāo)簽作為模板為列表中的每一部手機(jī)創(chuàng)建一個(gè)<li>元素。
正如我們?cè)诘?步時(shí)學(xué)到的，包裹在phone.name和phone.snippet周?chē)幕ɡㄌ?hào)標(biāo)識(shí)著數(shù)據(jù)綁定。和常量計(jì)算不同的是，這里的表達(dá)式實(shí)際上是我們應(yīng)用的一個(gè)數(shù)據(jù)模型引用，這些我們?cè)?code>PhoneListCtrl控制器里面都設(shè)置好了。

http://wiki.jikexueyuan.com/project/angularjs-tutorial/images/angular-templates-1.png" alt="Image of angular-templates-1.png" />

模型和控制器

在PhoneListCtrl控制器里面初始化了數(shù)據(jù)模型（這里只不過(guò)是一個(gè)包含了數(shù)組的函數(shù)，數(shù)組中存儲(chǔ)的對(duì)象是手機(jī)數(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."}
      ];
    }

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

PhoneListCtrl——控制器方法的名字（在JS文件controllers.js中）和<body>標(biāo)簽里面的ngController指令的值相匹配。
手機(jī)的數(shù)據(jù)此時(shí)與注入到我們控制器函數(shù)的作用域（$scope）相關(guān)聯(lián)。當(dāng)應(yīng)用啟動(dòng)之后，會(huì)有一個(gè)根作用域被創(chuàng)建出來(lái)，而控制器的作用域是根作用域的一個(gè)典型后繼。這個(gè)控制器的作用域?qū)λ?code><body ng-controller="PhoneListCtrl">標(biāo)記內(nèi)部的數(shù)據(jù)綁定有效。

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

想要更加深入理解AngularJS的作用域，請(qǐng)參看AngularJS作用域文檔。

測(cè)試

“AngularJS方式”讓開(kāi)發(fā)時(shí)代碼測(cè)試變得十分簡(jiǎn)單。讓我們來(lái)瞅一眼下面這個(gè)為控制器新添加的單元測(cè)試：

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

這個(gè)測(cè)試驗(yàn)證了我們的手機(jī)數(shù)組里面有三條記錄（暫時(shí)無(wú)需弄明白這個(gè)測(cè)試腳本）。這個(gè)例子顯示出為AngularJS的代碼創(chuàng)建一個(gè)單元測(cè)試是多么的容易。正因?yàn)闇y(cè)試在軟件開(kāi)發(fā)中是必不可少的環(huán)節(jié)，所以我們使得在AngularJS可以輕易地構(gòu)建測(cè)試，來(lái)鼓勵(lì)開(kāi)發(fā)者多寫(xiě)它們。

在寫(xiě)測(cè)試的時(shí)候，AngularJS的開(kāi)發(fā)者傾向于使用Jasmine行為驅(qū)動(dòng)開(kāi)發(fā)（BBD）框架中的語(yǔ)法。盡管AngularJS沒(méi)有強(qiáng)迫你使用Jasmine，但是我們?cè)诮坛汤锩嫠械臏y(cè)試都使用Jasmine編寫(xiě)。你可以在Jasmine的Jasmine Wiki上獲得相關(guān)知識(shí)。

基于AngularJS的項(xiàng)目被預(yù)先配置為使用[JsTestDriver][]來(lái)運(yùn)行單元測(cè)試。你可以像下面這樣運(yùn)行測(cè)試：

在一個(gè)單獨(dú)的終端上，進(jìn)入到angular-phonecat目錄并且運(yùn)行./scripts/test-server.sh來(lái)啟動(dòng)測(cè)試（Windows命令行下請(qǐng)輸入.\scripts\test-server.bat來(lái)運(yùn)行腳本，后面腳本命令運(yùn)行方式類(lèi)似）；
打開(kāi)一個(gè)新的瀏覽器窗口，并且轉(zhuǎn)到http://localhost:9876 ；
選擇“Capture this browser in strict mode”。

這個(gè)時(shí)候，你可以?huà)侀_(kāi)你的窗口不管然后把這事忘了。JsTestDriver會(huì)自己把測(cè)試跑完并且把結(jié)果輸出在你的終端里。
運(yùn)行./scripts/test.sh進(jìn)行測(cè)試。

你應(yīng)當(dāng)看到類(lèi)似于如下的結(jié)果：

    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)

    耶！測(cè)試通過(guò)了！或者沒(méi)有...
    注意：如果在你運(yùn)行測(cè)試之后發(fā)生了錯(cuò)誤，關(guān)閉瀏覽器然后回到終端關(guān)了腳本，然后在重新來(lái)一邊上面的

練習(xí)

為index.html添加另一個(gè)數(shù)據(jù)綁定。例如：

  <p>Total number of phones: {{phones.length}}</p>

創(chuàng)建一個(gè)新的數(shù)據(jù)模型屬性，并且把它綁定到模板上。例如：

$scope.hello = "Hello, World!"

更新你的瀏覽器，確保顯示出來(lái)“Hello, World!”
用一個(gè)迭代器創(chuàng)建一個(gè)簡(jiǎn)單的表：

    <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ù)模型表達(dá)式的`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)之后單元測(cè)試失敗，然后重新跑一遍./scripts/test.sh腳本

總結(jié)

你現(xiàn)在擁有一個(gè)模型，視圖，控制器分離的動(dòng)態(tài)應(yīng)用了，并且你隨時(shí)進(jìn)行了測(cè)試。現(xiàn)在，你可以進(jìn)入到迭代器來(lái)為應(yīng)用加入全文檢索功能了。

上一篇：路由與多視圖 - Routing Multiple Views下一篇：完結(jié)篇 - The End