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 相关文章推荐
JObj预览一个JS的框架
Mar 13 Javascript
jquery slibings选取同级其他元素的实现代码
Nov 15 Javascript
js生成的验证码的实现与技术分析
Sep 17 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
Apr 20 Javascript
jQuery+formdata实现上传进度特效遇到的问题
Feb 24 Javascript
AngularJS ng-app 指令实例详解
Jul 30 Javascript
JavaScript中数组slice和splice的对比小结
Sep 22 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
Feb 23 Javascript
纯js封装的ajax功能函数与用法示例
May 14 Javascript
vue-cli V3.0版本的使用详解
Oct 24 Javascript
node中实现删除目录的几种方法
Jun 24 Javascript
React中Ref 的使用方法详解
Apr 28 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
php全角字符转换为半角函数
2014/02/07 PHP
解决Laravel5.5下的toArray问题
2019/10/15 PHP
PHP操作Redis常用命令的实例详解
2020/12/23 PHP
js 对象是否存在判断
2009/07/15 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
2011/09/26 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
2015/01/09 Javascript
JavaScript函数使用的基本教程
2015/06/04 Javascript
学习Bootstrap组件之下拉菜单
2015/07/28 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
2016/07/14 Javascript
AngularJS入门教程之XHR和依赖注入详解
2016/08/18 Javascript
js绘制购物车抛物线动画
2020/11/18 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
2016/11/09 Javascript
jQuery post数据至ashx实例详解
2016/11/18 Javascript
nodejs实现一个word文档解析器思路详解
2018/08/14 NodeJs
解决使用layui对select append元素无效或者未及时更新的问题
2019/09/18 Javascript
JS实现判断移动端PC端功能
2020/02/21 Javascript
js最全的数组的降维5种办法(小结)
2020/04/28 Javascript
微信小程序实现聊天室
2020/08/21 Javascript
python解析模块(ConfigParser)使用方法
2013/12/10 Python
Python极简代码实现杨辉三角示例代码
2016/11/15 Python
python小程序实现刷票功能详解
2019/07/17 Python
flask/django 动态查询表结构相同表名不同数据的Model实现方法
2019/08/29 Python
浅谈Python类中的self到底是干啥的
2019/11/11 Python
pytorch 实现在预训练模型的 input上增减通道
2020/01/06 Python
python第三方库学习笔记
2020/02/07 Python
Django设置Postgresql的操作
2020/05/14 Python
CSS3 Flex 弹性布局实例代码详解
2018/11/01 HTML / CSS
IE支持HTML5的解决方法
2009/10/20 HTML / CSS
大学生毕业自我鉴定
2013/11/06 职场文书
社会发展项目建议书
2014/08/25 职场文书
教师节慰问信
2015/02/15 职场文书
中小企业员工手册范本
2015/05/14 职场文书
2015年教研员工作总结
2015/05/26 职场文书
优秀员工演讲稿
2019/06/21 职场文书
fastdfs+nginx集群搭建的实现
2021/03/31 Servers