在这一步中,我们会实现电话细节的视图,这在用户点击列表中的一部电话时被展示。

  ·当您点击列表中的一部电话时,带有电话特定信息的电话细节页面将被展示。

我们打算使用$http来获取我们的数据,以此来实现电话细节视图,然后刷新phoneDetail组件模板。

最大的不同列举如下,您也可以点击这里从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服务来扩展phoneDetail组件的控制器,以此来获取正确的JSON文件,这和phoneList组件的控制器是一样的。

app/phone-detail/phone-detail.component.js:

angular.
module('phoneDetail').
component('phoneDetail', {
templateUrl: 'phone-detail/phone-detail.template.html',
controller: ['$http', '$routeParams',
function PhoneDetailController($http, $routeParams) {
var self = this; $http.get('phones/' + $routeParams.phoneId + '.json').then(function(response) {
self.phone = response.data;
});
}
]
});

为了给HTTP请求构建URL,我们使用$routeParams.phoneId,这是从当前路由中通过使用$routeservice提取出来的。

组件模板

内联的,TBD占位模板已经被一个扩展的外联模板所取代,这包含构成电话细节的列表和绑定。请注意我们如何使用{{expression}}标记和ngRepeat将我们的数据模型展示到视图层。

app/phone-detail/phone-detail.template.html:

<img ng-src="{{$ctrl.phone.images[0]}}" class="phone" />

<h1>{{$ctrl.phone.name}}</h1>

<p>{{$ctrl.phone.description}}</p>

<ul class="phone-thumbs">
<li ng-repeat="img in $ctrl.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 $ctrl.phone.availability">{{availability}}</dd>
</dl>
</li>
...
<li>
<span>Additional Features</span>
<dd>{{$ctrl.phone.additionalFeatures}}</dd>
</li>
</ul>

总结

既然电话细节视图搞定了,进入下一步来学习怎么样编写您自己的展示过滤器吧。

[Angular Tutorial] 10 -More Templating的更多相关文章

  1. [Angular Tutorial]PhoneCat Tutorial App

    (注:曾经在<不敢止步>一书中看到学到一个观点,作者认为学习一门技术最好的方法就是翻译某部领域书籍.这里我决定做一次尝试,接下来花1个月左右时间,将Angular Tutorial Pho ...

  2. [Angular Tutorial] 8 - Templating Links & Images

    在这一步中,我们将会在电话列表中为电话添加略图,并附上链接,当然现在也不会链接去哪.在随后的步骤中,我们将使用这些链接来展示电话列表中额外的信息. ·现在电话列表中会有链接和图片. 最重要的不同在下面 ...

  3. [Angular Tutorial] 3-Components

    在先前的步骤中,我们看到了一个控制器和一个模板如何一起工作来将一个静态的HTML文件转化为动态页面(view).一般说来,这在单页应用中一种非常常见的模式(在Angular应用中尤其是这样): ·客户 ...

  4. [Angular Tutorial] 7-XHRs & Dependency Injection

    我们受够了在应用中用硬编码的方法嵌入三部电话!现在让我们用Angular内建的叫做$http的服务来从我们的服务器获取更大的数据集吧.我们将会使用Angular的依赖注入来为PhoneListCtrl ...

  5. [Angular Tutorial] 0-Bootstraping

    在这一节的tutorial中,您将会逐渐熟悉AngularJS phonecat app的最重要的源代码文件.您也将学到如何将开发服务器与angular-seed绑定到一起,并且在浏览器中运行应用. ...

  6. [译]The Python Tutorial#10. Brief Tour of the Standard Library

    [译]The Python Tutorial#Brief Tour of the Standard Library 10.1 Operating System Interface os模块为与操作系统 ...

  7. [Angular Tutorial] 14 -Animations

    在这一步中,我们将会通过在我们先前创建的模板代码中添加CSS和JavaScript动画效果来扩展我们的web应用. ·我们现在使用ngAnimate模块来允许动画效果贯穿整个应用. ·我们也依赖于自带 ...

  8. [Angular Tutorial] 13 -REST and Custom Services

    在这一步中,我们将会改变我们获取数据的方式. ·我们定义一个代表RESTful客户端的自定义服务.使用这个客户端,我们可以用一种更简单的方法向服务端请求数据,而不用处理更底层的$httpAPI,HTT ...

  9. [Angular Tutorial] 12 -Event Handlers

    在这一步中,您将会在电话细节页面添加一个可点击的电话图片转换器. ·电话细节页面展示了当前电话的一张大图片和几张相对较小的略图.如果我们能仅仅通过点击略图就能把大图片换成略图就好了.让我们看看用Ang ...

随机推荐

  1. script 两则

    script1: PATH=/usr/local/bin:/usr/bin:$PATH:. . $HOME/utility/macro/macro.env OVO_DIR=/tmp LOGFILE=$ ...

  2. spring + hibernate 添加用户

    Employee.java: package com.lh.bean; public class Employee { private int id; private String name; pri ...

  3. Dice Possibility

    Dice Possibility 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 What is possibility of rolling N dice and th ...

  4. HDU 3743 Frosh Week(归并排序求逆序数)

    归并排序求逆序数 #include <iostream> #include <cstdio> using namespace std; #define maxn 1000005 ...

  5. FileFilter与FilenameFilter实例

    下面的例子中我们创建了一个FileFilter类,此类根据文件名的扩展名是否为.txt来筛选文件.创建FileFilter实例之后需要将此实例作为参数传给File的listFiles(fileFilt ...

  6. Qt5:窗口背景色的设置

    在Qt中,设置窗口背景色有多种方法,如通过setStyleSheet   和 调色板 setPalette 等 下面是setPalette 方法 QPalette pale = palette(); ...

  7. 请问如何在PS中将一张图标里的各个小图标分离成一个个图标?

    1.用切片工具比较简单快捷,把要切的图标一个个的切画出来,切好后存储保存格式为web,导出时候会出现一个images文件里面就是刚切好的图片 2.用裁剪的方式裁剪你要小图标,(你可以记住第一个裁剪的长 ...

  8. iOS中4种判断网络请求的方式(系统状态栏、AFNetworking、Reachability、自定义)

    iOS 实时判断网络状态 方法一:利用系统状态栏判断网络状态 // 状态栏是由当前app控制的,首先获取当前app UIApplication *app = [UIApplication shared ...

  9. office加载项部署清单签名的证书或其位置不受信任

    异常信息: System.Security.SecurityException: 此应用程序中的自定义功能将不起作用,原因是用于为 BIMT写作指导 的部署清单签名的证书或其位置不受信任.请向管理员寻 ...

  10. 计算机学院大学生程序设计竞赛(2015’12) 1003 The collector’s puzzle

    #include<cstdio> #include<algorithm> using namespace std; using namespace std; +; int a[ ...