AngularJS入门教程之更多模板详解


Posted in Javascript onAugust 19, 2016

在这一步,你将实现手机详细信息视图,这个视图会在用户点击手机列表中的一部手机时被显示出来。

请重置工作目录:

git checkout -f step-8

现在当你点击列表中的一部手机之后,这部手机的详细信息页面就会被显示出来。

为了实现手机详细信息视图我们将会使用$http来获取数据,同时我们也要增添一个phone-detail.html视图模板。

步骤7和步骤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服务获取数据,以此来拓展我们的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'];

为了构造HTTP请求的URL,我们需要$route服务提供的当前路由中抽取$routeParams.phoneId。

模板

phone-detail.html文件中原有的TBD占位行已经被列表和构成手机详细信息的绑定替换掉了。注意到,这里我们使用AngularJS的{{表达式}}标记和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

...
 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更多模版的资料,后续继续补充相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
如何确保JavaScript的执行顺序 之实战篇
Mar 03 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
Aug 13 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
Jun 01 Javascript
吐槽一下我所了解的Node.js
Oct 08 Javascript
浅谈JavaScript中的Math.atan()方法的使用
Jun 14 Javascript
详解Bootstrap各式各样的按钮(推荐)
Dec 13 Javascript
JS正则子匹配实例分析
Dec 22 Javascript
详谈js对url进行编码和解码(三种方式的区别)
Aug 16 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
Vue实现6位数密码效果
Aug 18 Javascript
微信小程序实现手势滑动效果
Aug 26 Javascript
原生js实现随机点餐效果
Dec 10 Javascript
详解Angular中$cacheFactory缓存的使用
Aug 19 #Javascript
JS获取当前页面名称的简单实例
Aug 19 #Javascript
AngularJS应用开发思维之依赖注入3
Aug 19 #Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
Aug 19 #Javascript
js 获取当前web应用的上下文路径实现方法
Aug 19 #Javascript
AngularJS入门教程之路由与多视图详解
Aug 19 #Javascript
AngularJS入门教程之链接与图片模板详解
Aug 19 #Javascript
You might like
基于mysql的论坛(5)
2006/10/09 PHP
创建配置文件 用PHP写出自己的BLOG系统 2
2010/04/12 PHP
PHP上传文件参考配置大文件上传
2015/12/16 PHP
简介WordPress中用于获取首页和站点链接的PHP函数
2015/12/17 PHP
JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】
2019/04/16 PHP
TP框架实现上传一张图片和批量上传图片的方法分析
2020/04/23 PHP
Ajax执行顺序流程及回调问题分析
2012/12/10 Javascript
javascript实现可改变滚动方向的无缝滚动实例
2013/06/17 Javascript
javascript实现div的显示和隐藏的小例子
2013/06/25 Javascript
js、css、img等浏览器缓存问题的2种解决方案
2013/10/23 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
2013/12/02 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
2013/12/24 Javascript
js实现的复制兼容chrome和IE
2014/04/03 Javascript
深入剖析JavaScript面向对象编程
2016/07/12 Javascript
BootStrap整体框架之基础布局组件
2016/12/15 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
2017/04/25 jQuery
JS实现多物体运动的方法详解
2018/01/23 Javascript
Vue中的Props(不可变状态)
2018/09/29 Javascript
js防抖和节流的深入讲解
2018/12/06 Javascript
Element输入框带历史查询记录的实现示例
2019/01/15 Javascript
mock.js实现模拟生成假数据功能示例
2019/01/15 Javascript
python基础教程之字典操作详解
2014/03/25 Python
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
python2.7使用plotly绘制本地散点图和折线图
2019/04/02 Python
pyqt5中QThread在使用时出现重复emit的实例
2019/06/21 Python
python删除文件、清空目录的实现方法
2020/09/23 Python
python制作抽奖程序代码详解
2021/01/15 Python
数学系毕业生的自我评价
2014/01/10 职场文书
回门宴父母答谢词
2014/01/26 职场文书
社区端午节活动方案
2014/01/28 职场文书
个人求职信范文分享
2014/01/31 职场文书
少年闰土教学反思
2014/02/22 职场文书
美容院经理岗位职责
2014/04/03 职场文书
生死抉择观后感
2015/06/09 职场文书
岗位聘任协议书
2015/09/21 职场文书
k-means & DBSCAN 总结
2021/04/27 Python