手机详细视图实现与AngularJS应用开发教程-优快云博客

在这步，你将实现手机详细视图，当用户在手机列表中点击手机的时候就会显示。

你点击列表中的手机，手机详细页面将显示手机特有的信息。

我们使用 $http适配我们的数据去实现手机详细视图，我们将填充 phone-detail视图模板。工作空间重置介绍重置你的工作区间到第八步

git checkout -f step-8

刷新你的浏览器，或者在线上检出这一步：第八步例子。大部分重要的修改都列在下面，你在 GitHub上能看全部不同。

数据

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

这些文件中描述手机的变量用了相同的结构。我们将在手机详细页面中展示。

控制器

我们使用$http去读取JSON文件追加到 PhoneDetailCtrl，他和手机列表一样工作。 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;
    });
  }]);

我们使用 $routeParams.phoneId 从 $route服务中提取当前的路由，构造HTTP请求的URL地址。

模板

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>

测试

我们写了一个新的单元测试，像我们在第5步中给 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详细页面，确保他的标签是“Nexus5”。 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 去看测试运行。