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 24 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
Oct 15 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
Feb 28 Javascript
javascript 拷贝节点cloneNode()使用介绍
Apr 03 Javascript
字段太多jquey快速清空表单内容方法
Aug 21 Javascript
JS基于面向对象实现的放烟花效果
May 07 Javascript
jQuery的promise与deferred对象在异步回调中的作用
May 03 Javascript
jquery按回车键实现表单提交的简单实例
May 25 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
Jun 21 Javascript
JS实现图片点击后出现模态框效果
May 03 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
Oct 29 Javascript
JS实现简易日历效果
Jan 25 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
从零开始学YII2框架(四)扩展插件yii2-kartikgii
2014/08/20 PHP
php提交post数组参数实例分析
2015/12/17 PHP
php简单实现批量上传图片的方法
2016/05/09 PHP
PHP chop()函数讲解
2019/02/11 PHP
jQuery插件 tabBox实现代码
2010/02/09 Javascript
基于JQuery制作的产品广告效果
2010/12/08 Javascript
Javascript面向对象扩展库代码分享
2012/03/27 Javascript
jQuery 复合选择器应用的几个例子
2014/09/11 Javascript
IE中鼠标经过option触发mouseout的解决方法
2015/01/29 Javascript
JavaScript编写推箱子游戏
2015/07/07 Javascript
JS使用eval解析JSON的注意事项分析
2015/11/14 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
2016/08/17 Javascript
浅谈JS的基础类型与引用类型
2016/09/13 Javascript
jQuery EasyUI常用数据验证汇总
2016/09/18 Javascript
Node连接mysql数据库方法介绍
2017/02/07 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
原生js实现倒计时--2018
2017/02/21 Javascript
JavaScript中的遍历详解(多种遍历)
2017/04/07 Javascript
详解如何在项目中使用jest测试react native组件
2018/02/09 Javascript
微信小程序实现左右列表联动
2020/05/19 Javascript
nodejs读取图片返回给浏览器显示
2019/07/25 NodeJs
django实现用户登陆功能详解
2017/12/11 Python
学习Python selenium自动化网页抓取器
2018/01/20 Python
python skimage 连通性区域检测方法
2018/06/21 Python
Tensorflow获取张量Tensor的具体维数实例
2020/01/19 Python
基于Python爬虫采集天气网实时信息
2020/06/05 Python
python中复数的共轭复数知识点总结
2020/12/06 Python
python爬虫beautifulsoup解析html方法
2020/12/07 Python
三星印度官网:Samsung印度
2019/08/03 全球购物
XML文档面试题
2015/08/05 面试题
关于毕业的广播稿
2014/01/10 职场文书
英语教学随笔感言
2014/02/20 职场文书
个人债务授权委托书
2014/10/17 职场文书
和谐家庭事迹材料
2014/12/20 职场文书
CSS 伪元素::marker详解
2021/06/26 HTML / CSS
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫