【一起学AngularJS】第十章、动态获取和展示详情页

本章我们将把手机的详情页做详细一点。改动很简单：

• 当点击列表页中的某个手机时，手机详情页将被展示。

另外比较有趣的是，这次详情页的数据获取我们将借助$http服务来完成。
使用git迁出step-8分支就是该章对应的实例代码：

git checkout -f step-8

刷新你的浏览器来看效果，或者可以点这里在线查看。

数据

除了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"
  }
}

每个文件的结构是一样的，只是具体参数的值不一样。详情页视图将会展示这些数据。

控制器

我们将对PhoneDetailCtrl控制器做一点扩展：使用$http服务来获取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;
    });
  }]);

我们使用由$route服务从当前路由地址中抽取的￥routeParams.phoneId变量来构建不同手机的不通HTTP请求的URL地址。

模版

我们把之前的TBD占位行替换成了手机详情内容。注意我们是在哪里使用{{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>

测试

我们写了一个和第七章中为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)

我们还写了一个端到端测试来测试详情页的Heading是不是“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详情页4张照片是否显示正确。（注解：觉得复杂就别做了。没啥。）

总结

下一章我们将学习如何编写自己的过滤器。