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 相关文章推荐
js post方式传递提交的实现代码
May 31 Javascript
仿百度输入框智能提示的js代码
Aug 22 Javascript
使用focus方法让光标默认停留在INPUT框
Jul 29 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
Jan 23 Javascript
js判断主流浏览器类型和版本号的简单实现代码
May 26 Javascript
轻松理解JavaScript之AJAX
Mar 15 Javascript
JS查找数组中重复元素的方法详解
Jun 14 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
jquery实现下载图片功能
Jul 18 jQuery
react MPA 多页配置详解
Oct 18 Javascript
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
详解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
一个PHP模板,主要想体现一下思路
2006/12/25 PHP
PHP中去除换行解决办法小结(PHP_EOL)
2011/11/27 PHP
10 个经典PHP函数
2013/10/17 PHP
PHP查询附近的人及其距离的实现方法
2016/05/11 PHP
由php中字符offset特征造成的绕过漏洞详解
2017/07/07 PHP
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
jquery实现动态菜单的实例代码
2013/11/28 Javascript
js抽奖实现随机抽奖代码效果
2013/12/02 Javascript
不要使用jQuery触发原生事件的方法
2014/03/03 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
2014/05/29 Javascript
JQuery中DOM加载与事件执行实例分析
2015/06/13 Javascript
javascript自定义in_array()函数实现方法
2015/08/03 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
2016/08/05 Javascript
手机Web APP如何实现分享多平台功能
2016/08/19 Javascript
jquery对象和DOM对象的相互转换详解
2016/10/18 Javascript
jQuery-mobile事件监听与用法详解
2016/11/23 Javascript
Bootstrap和Java分页实例第二篇
2016/12/23 Javascript
jQuery实现限制文本框的输入长度
2017/01/11 Javascript
js实现动态显示时间效果
2017/03/06 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
2017/12/06 Javascript
vue webpack开发访问后台接口全局配置的方法
2018/09/18 Javascript
jQuery选择器之基本选择器用法实例分析
2019/02/19 jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
2019/05/27 jQuery
微信小程序如何修改radio和checkbox的默认样式和图标
2019/07/24 Javascript
在vue中配置不同的代理同时访问不同的后台操作
2020/09/11 Javascript
Python 命令行参数sys.argv
2008/09/06 Python
Python获取昨天、今天、明天开始、结束时间戳的方法
2018/06/01 Python
Python为何不能用可变对象作为默认参数的值
2019/07/01 Python
python创建与遍历List二维列表的方法
2019/08/16 Python
Python实现平行坐标图的绘制(plotly)方式
2019/11/22 Python
jupyter notebook清除输出方式
2020/04/10 Python
用HTML5实现手机摇一摇的功能的教程
2012/10/30 HTML / CSS
详解h5页面在不同ios设备上的问题总结
2019/03/01 HTML / CSS
德国BA保镖药房韩文网:kr.ba.de
2017/09/04 全球购物
.net笔试题
2014/03/03 面试题
2015重阳节座谈会主持词
2015/07/30 职场文书