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

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

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

<img ng-src="/UploadFiles/2021-04-02/{{phone.images[0]}}">

测试
我们来写一个新的单元测试，这个测试和我们在步骤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'});
  });
 });
...


执行./scripts/test.sh脚本来执行测试，你应该会看到如下输出：




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


你现在可以刷新你的浏览器，然后重新跑一遍端到端测试，或者你可以在AngularJS的服务器上运行一下。
练习
使用AngularJS端到端测试API写一个测试，用它来验证我们在Nexus S详细信息页面显示的四个缩略图。
总结
现在手机详细页面已经就绪了，在步骤9中我们将学习如何写一个显示过滤器。
以上就是整理AngularJS更多模版的资料，后续继续补充相关资料，谢谢大家对本站的支持！