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 定时器调用传递参数的方法
Nov 12 Javascript
Jquery实战_读书笔记2 选择器
Jan 22 Javascript
js实现省市联动效果的简单实例
Feb 10 Javascript
jQuery 处理页面的事件详解
Jan 20 Javascript
javascript数组去重的六种方法汇总
Aug 16 Javascript
js获取url传值的方法
Dec 18 Javascript
浅析JS操作DOM的一些常用方法
May 13 Javascript
如何解决hover在ie6中的兼容性问题
Dec 15 Javascript
javascript基本常用排序算法解析
Sep 27 Javascript
详解.vue文件中style标签的几个标识符
Jul 17 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
Aug 30 Javascript
node.js的http.createServer过程深入解析
Jun 06 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
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
php提交表单时判断 if($_POST[submit])与 if(isset($_POST[submit])) 的区别
2011/02/08 PHP
PHP 图片水印类代码
2012/08/27 PHP
网页上facebook分享功能具体实现
2014/01/26 PHP
在WordPress中实现发送http请求的相关函数解析
2015/12/29 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
PHP实现的DES加密解密类定义与用法示例
2020/11/02 PHP
js控制input框只读实现示例
2014/01/20 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
2017/06/28 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
2018/09/16 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
2019/09/21 Javascript
分享JS表单验证源码(带错误提示及密码等级)
2020/01/05 Javascript
Vue 图片压缩并上传至服务器功能
2020/01/15 Javascript
[01:08]DOTA2次级职业联赛 - Shield战队宣传片
2014/12/01 DOTA
python机器学习实战之最近邻kNN分类器
2017/12/20 Python
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
pycharm运行和调试不显示结果的解决方法
2018/11/30 Python
Pycharm简单使用教程(入门小结)
2019/07/04 Python
python 一篇文章搞懂装饰器所有用法(建议收藏)
2019/08/23 Python
python TK库简单应用(实时显示子进程输出)
2019/10/29 Python
pytorch数据预处理错误的解决
2020/02/20 Python
python能否java成为主流语言吗
2020/06/22 Python
python为什么会环境变量设置不成功
2020/06/23 Python
Scrapy-Redis之RedisSpider与RedisCrawlSpider详解
2020/11/18 Python
flask框架中的cookie和session使用
2021/01/31 Python
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
2017/03/15 HTML / CSS
魔声耳机官方网站:Monster是世界第一品牌的高性能耳机
2016/10/26 全球购物
上班上网检讨书
2014/01/29 职场文书
网络工程师职业规划
2014/02/10 职场文书
气象学专业个人求职信
2014/04/22 职场文书
公司周年庆典标语
2014/10/07 职场文书
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS
5道关于python基础 while循环练习题
2021/11/27 Python