更多模板

在這一步中，你將實現手機詳情視圖，當用戶在手機列表中點擊了一款手機，就會顯示這個視圖。

• 當你在列表中點擊了一款手機，將顯示帶手機專有信息的手機詳情視圖。

要想實現手機詳情視力，我們將使用$http以取回我們的數據，然后具體化phone-detail.html視圖模板。

把工作空間重置到第八步

git checkout -f step-8

刷新你的瀏覽器或在線檢查這一步：Step 8 Live Demo

下面列出了第七步和第八步之間最重要的區別。你可以在GitHub上看到完整的差異。

數據

除了phones.json，app/phones/目錄還包括一個針對每款手機的JSON文件：

app/phones/nexus-s.json: (sample snippet)

{
  "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"
  }
}

每個文件用同樣的數據結構描述了手機的多種屬性。我們將在手機詳情視圖中展示這些數據。

控制器

我們將使用$http服務以擴展PhoneDetailCtrl，從而取回JSON文件。這以手機列表控制器中同樣的方式起作用。

app/js/controllers.js:

var phonecatControllers = angular.module('phonecatControllers',[]);

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

要想為HTTP請求構造URL，我們使用從$route服務生成的當前路由中提取到的$routeParames.phoneId。

模板

該TBD占位符行已經被替換成列表，綁定包含了手機詳情。注意我們使用Angular的{{expression}}標簽以及ngRepeat的地方，用來從我們的模塊把投射手機數據到視圖中。

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>

TODO!

測試

我們寫了一個新的單元測試，類似于我們之前在第五步中為PhoneListCtrl控制器所寫的步驟。

test/unit/controllersSpec.js:

  beforeEach(module('phonecatApp'));

  ...

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

你現在可以看到后來在Karma標簽中的輸出：

Chrome 22.0: Executed 3 of 3 SUCCESS (0.039 secs / 0.012 secs)

我們還添加了一個新的端到端的測試，導航到Nexus S詳情頁面，并核查了頁面上的標題是“Nexus S”。

test/e2e/scenarios.js:

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

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

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

你可以再次運行npm run protractor以看到測試運行。

實驗

• 使用Protractor API，寫一個測試核查到我們在Nexus S詳情頁面中顯示了四個縮略圖。

總結

現在手機詳情視力已經到位了，繼續前往第九步 篩選器以學習如何編寫你自己的自定義顯示過濾器。