[Angular Tutorial] 10 -More Templating
在这一步中,我们会实现电话细节的视图,这在用户点击列表中的一部电话时被展示。
·当您点击列表中的一部电话时,带有电话特定信息的电话细节页面将被展示。
我们打算使用$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,这是从当前路由中通过使用$route
service提取出来的。
组件模板
内联的,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的更多相关文章
- [Angular Tutorial]PhoneCat Tutorial App
(注:曾经在<不敢止步>一书中看到学到一个观点,作者认为学习一门技术最好的方法就是翻译某部领域书籍.这里我决定做一次尝试,接下来花1个月左右时间,将Angular Tutorial Pho ...
- [Angular Tutorial] 8 - Templating Links & Images
在这一步中,我们将会在电话列表中为电话添加略图,并附上链接,当然现在也不会链接去哪.在随后的步骤中,我们将使用这些链接来展示电话列表中额外的信息. ·现在电话列表中会有链接和图片. 最重要的不同在下面 ...
- [Angular Tutorial] 3-Components
在先前的步骤中,我们看到了一个控制器和一个模板如何一起工作来将一个静态的HTML文件转化为动态页面(view).一般说来,这在单页应用中一种非常常见的模式(在Angular应用中尤其是这样): ·客户 ...
- [Angular Tutorial] 7-XHRs & Dependency Injection
我们受够了在应用中用硬编码的方法嵌入三部电话!现在让我们用Angular内建的叫做$http的服务来从我们的服务器获取更大的数据集吧.我们将会使用Angular的依赖注入来为PhoneListCtrl ...
- [Angular Tutorial] 0-Bootstraping
在这一节的tutorial中,您将会逐渐熟悉AngularJS phonecat app的最重要的源代码文件.您也将学到如何将开发服务器与angular-seed绑定到一起,并且在浏览器中运行应用. ...
- [译]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模块为与操作系统 ...
- [Angular Tutorial] 14 -Animations
在这一步中,我们将会通过在我们先前创建的模板代码中添加CSS和JavaScript动画效果来扩展我们的web应用. ·我们现在使用ngAnimate模块来允许动画效果贯穿整个应用. ·我们也依赖于自带 ...
- [Angular Tutorial] 13 -REST and Custom Services
在这一步中,我们将会改变我们获取数据的方式. ·我们定义一个代表RESTful客户端的自定义服务.使用这个客户端,我们可以用一种更简单的方法向服务端请求数据,而不用处理更底层的$httpAPI,HTT ...
- [Angular Tutorial] 12 -Event Handlers
在这一步中,您将会在电话细节页面添加一个可点击的电话图片转换器. ·电话细节页面展示了当前电话的一张大图片和几张相对较小的略图.如果我们能仅仅通过点击略图就能把大图片换成略图就好了.让我们看看用Ang ...
随机推荐
- java项目(java project)如何导入jar包的解决方案列表
右键项目-properties-java build path(左侧菜单)-选择libraries 有两种方式,导入jar包实际上就是建立一种链接,并不是copy式的导入 一.导入外部包,add ex ...
- nginx slab内存管理
本来这一篇作为nginx系列的开头是不合适的,不过由于nginx进程框架自己的梳理还没完成,这部分又刚好整理完了,就从这开始吧.这儿谈的是nginx的slab的内存管理方式,这种方式的内存管理在ngi ...
- jsonp的简单实现
jsonp: function(url, data, callback){ if( wfQuery.isFunction(data) ){ callback = data; data = {}; } ...
- Codeforces Round #361 (Div. 2) C.NP-Hard Problem
题目连接:http://codeforces.com/contest/688/problem/C 题意:给你一些边,问你能否构成一个二分图 题解:二分图:二分图又称作二部图,是图论中的一种特殊模型. ...
- What is “Mock You” :Raise,callback,verify [转载]
http://www.cnblogs.com/wJiang/archive/2010/02/21/1670637.html Raise 如果你说会用Setup,那么Raise就更简单了.这里注意下它是 ...
- Android Studio中有没有类似于Eclipse中的ctrl+2+L的快捷键? \Android Studio快捷键之代码提示
问:Android Studio中有没有类似于Eclipse中的ctrl+2+L的快捷键? 答:有,as中的快捷键是Ctrl+Alt+V AndroidStudio和Eclipse常用快捷键对比 功能 ...
- IPSec VPN实验
IPSec VPN实验 实验拓扑: 实验目的:掌握IPSec VPN原理 掌握site-to-site VPN配置 IPSec配置参数: IKE policy isakmp key 转换集 加密算法 ...
- Hibernate配置过程可能发生的问题及解决方法
1.问题:Exception in thread "main" java.lang.NoClassDefFoundError: org/dom4j/DocumentExceptio ...
- iOS:判断昨天,今天,今年
- (BOOL)isThisYear { // 日历 NSCalendar *calendar = [NSCalendar currentCalendar]; NSInteger nowYear = ...
- Hadoop远程调用机制