更多模版 - More Templating

在這一步，你將實現(xiàn)手機詳細信息視圖，這個視圖會在用戶點擊手機列表中的一部手機時被顯示出來。

請重置工作目錄：

    git checkout -f step-8

現(xiàn)在當你點擊列表中的一部手機之后，這部手機的詳細信息頁面就會被顯示出來。

為了實現(xiàn)手機詳細信息視圖我們將會使用$http來獲取數(shù)據(jù)，同時我們也要增添一個phone-detail.html視圖模板。

步驟7和步驟8之間最重要的不同在下面列出。你可以在GitHub里看到完整的差別。

數(shù)據(jù)

除了phones.json，app/phones/目錄也包含了每一部手機信息的json文件。

app/phones/nexus-s.json（樣例片段）

    {
      "additionalFeatures": "Contour Display, Near Field Communications (NFC),...",
      "android": {
          "os": "Android 2.3",
          "ui": "Android"
      },
      ...
      "images": [
          "img/phones/nexus-s.0.jpg",
          "img/phones/nexus-s.1.jpg",
          "img/phones/nexus-s.2.jpg",
          "img/phones/nexus-s.3.jpg"
      ],
      "storage": {
          "flash": "16384MB",
          "ram": "512MB"
      }
    }

這些文件中的每一個都用相同的數(shù)據(jù)結(jié)構(gòu)描述了一部手機的不同屬性。我們會在手機詳細信息視圖中顯示這些數(shù)據(jù)。

控制器

我們使用$http服務(wù)獲取數(shù)據(jù)，以此來拓展我們的PhoneListCtrl。這和之前的手機列表控制器的工作方式是一樣的。

app/js/controllers.js

    function PhoneDetailCtrl($scope, $routeParams, $http) {
      $http.get('phones/' + $routeParams.phoneId + '.json').success(function(data) {
        $scope.phone = data;
      });
    }

    //PhoneDetailCtrl.$inject = ['$scope', '$routeParams', '$http'];

為了構(gòu)造HTTP請求的URL，我們需要$route服務(wù)提供的當前路由中抽取$routeParams.phoneId。

模板

phone-detail.html文件中原有的TBD占位行已經(jīng)被列表和構(gòu)成手機詳細信息的綁定替換掉了。注意到，這里我們使用AngularJS的{{表達式}}標記和ngRepeat來在視圖中渲染數(shù)據(jù)模型。

app/partials/phone-detail.html

    <img ng-src="{{phone.images[0]}}" class="phone">

    <h1>{{phone.name}}</h1>

    <p>{{phone.description}}</p>

    <ul class="phone-thumbs">
      <li ng-repeat="img in phone.images">
        <img ng-src="{{img}}">
      </li>
    </ul>

    <ul class="specs">
      <li>
        <span>Availability and Networks</span>
        <dl>
          <dt>Availability</dt>
          <dd ng-repeat="availability in phone.availability">{{availability}}</dd>
        </dl>
      </li>
        ...
      </li>
        <span>Additional Features</span>
        <dd>{{phone.additionalFeatures}}</dd>
      </li>
    </ul>

測試

我們來寫一個新的單元測試，這個測試和我們在步驟5中為PhoneListCtrl寫的那個很像。

test/unit/controllersSpec.js

    ...
      describe('PhoneDetailCtrl', function(){
        var scope, $httpBackend, ctrl;

        beforeEach(inject(function(_$httpBackend_, $rootScope, $routeParams, $controller) {
          $httpBackend = _$httpBackend_;
          $httpBackend.expectGET('phones/xyz.json').respond({name:'phone xyz'});

          $routeParams.phoneId = 'xyz';
          scope = $rootScope.$new();
          ctrl = $controller(PhoneDetailCtrl, {$scope: scope});
        }));

        it('should fetch phone detail', function() {
          expect(scope.phone).toBeUndefined();
          $httpBackend.flush();

          expect(scope.phone).toEqual({name:'phone xyz'});
        });
      });
    ...

執(zhí)行`./scripts/test.sh`腳本來執(zhí)行測試，你應(yīng)該會看到如下輸出：

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

同時，我們也添加一個端到端測試，指向Nexus S手機詳細信息頁面并且驗證頁面的頭部是“Nexus S”。

test/e2e/scenarios.js

    ...
      describe('Phone detail view', function() {

        beforeEach(function() {
          browser().navigateTo('../../app/index.html#/phones/nexus-s');
        });

        it('should display nexus-s page', function() {
          expect(binding('phone.name')).toBe('Nexus S');
        });
      });
    ...

你現(xiàn)在可以刷新你的瀏覽器，然后重新跑一遍端到端測試。

練習

使用AngularJS端到端測試API寫一個測試，用它來驗證我們在Nexus S詳細信息頁面顯示的四個縮略圖。

總結(jié)

現(xiàn)在手機詳細頁面已經(jīng)就緒了，在過濾器中我們將學習如何寫一個顯示過濾器。