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面向对象的方式实现的弹出层效果代码
Jan 28 Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
Sep 14 Javascript
js字符串的各种格式的转换 ToString,Format
Aug 08 Javascript
thinkphp中常用的系统常量和系统变量
Mar 05 Javascript
JavaScript获取XML数据附示例截图
Mar 05 Javascript
jQuery实现自定义checkbox和radio样式
Jul 13 Javascript
Angular ng-animate和ng-cookies用法详解
Apr 18 Javascript
详解vue中router-link标签所必备了解的属性
Apr 15 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
Mar 31 Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
Jul 31 Javascript
Vue select 绑定动态变量的实例讲解
Oct 22 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
Nov 03 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
单位速度在实战中的运用
2020/03/04 星际争霸
php使用cookie实现记住登录状态
2015/04/27 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
PHP 数组操作详解【遍历、指针、函数等】
2020/05/13 PHP
PHP接入支付宝接口失效流程详解
2020/11/10 PHP
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
2010/03/16 Javascript
javascript,jquery闭包概念分析
2010/06/19 Javascript
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
js导出格式化的excel 实例方法
2013/07/17 Javascript
JS读取XML文件示例代码
2013/11/15 Javascript
javascript搜索框点击文字消失失焦时文本出现
2014/09/18 Javascript
js简单抽奖代码
2015/01/16 Javascript
jQuery 弹出层插件(推荐)
2016/05/24 Javascript
js 动态生成json对象、时时更新json对象的方法
2016/12/02 Javascript
利用Node.js检测端口是否被占用的方法
2017/12/07 Javascript
VUE v-model表单数据双向绑定完整示例
2019/01/21 Javascript
浅谈Vue的响应式原理
2019/05/30 Javascript
浅析Python中的多重继承
2015/04/28 Python
python计算时间差的方法
2015/05/20 Python
python 计算数组中每个数字出现多少次--“Bucket”桶的思想
2017/12/19 Python
Python 判断文件或目录是否存在的实例代码
2018/07/19 Python
Python 中字符串拼接的多种方法
2018/07/30 Python
python flask安装和命令详解
2019/04/02 Python
如何在mac环境中用python处理protobuf
2019/12/25 Python
Python +Selenium解决图片验证码登录或注册问题(推荐)
2020/02/09 Python
荷兰街头时尚之家:Funkie House
2019/03/18 全球购物
什么是.net的Remoting技术
2016/07/08 面试题
什么是SCM(软件配置管理)
2014/08/16 面试题
个人租房协议书
2014/04/09 职场文书
教师批评与自我批评
2014/10/15 职场文书
毕业生见习报告总结
2014/11/08 职场文书
2014年健康教育工作总结
2014/11/20 职场文书
服装区域经理岗位职责
2015/04/10 职场文书
2015年档案管理员工作总结
2015/05/13 职场文书
使用Postman测试需要授权的接口问题
2022/06/21 Java/Android
Python软件包安装的三种常见方法
2022/07/07 Python