上一课，大家知道，手机详细模板我们没有写出来，使用的是一个占位模板。
这一课，我们先实现手机详细信息视图，这个视图会在用户点击手机列表中的一部手机时被显示出来。
为了实现手机详细信息视图，我们将会使用$http来获取数据。
以下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服务获取数据，以此来拓展我们的PhoneDetailCtrl控制器。这和之前手机列表控制器的工作方式是一样的。
function PhoneDetailCtrl($scope, $routeParams, $http) {
$http.get('phones/' + $routeParams.phoneId + '.json').success(function(data) {
$scope.phone = data;
});
}
phone-detail.html文件中原有的TBD占位行已经被手机详细信息替换掉了。注意到，这里我们使用AngularJS的{{表达式}}标记和ngRepeat来在视图中渲染数据模型。
<img ng-src="{{phone.images[0]}}">
<h1>{{phone.name}}</h1>
<p>{{phone.description}}</p>
<ul>
<li ng-repeat="img in phone.images">
<img ng-src="{{img}}">
</li>
</ul>
<ul>
<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>
然后，我们在程序中创建自己的过滤器。
为了创建一个新的过滤器，我们先创建一个phonecatFilters模块，并且将定制的过滤器checkmark注册给这个模块。
angular.module('phonecatFilters', []).filter('checkmark', function() {
return function(input) {
return input ? '\u2713' : '\u2718';
};
});
我们的过滤器命名为checkmark。它的输入要么是true，要么是false，并且我们返回两个表示true或false的unicode字符（\u2713和\u2718）。
现在我们的过滤器准备好了，我们需要将我们的phonecatFilters模块作为一个依赖，注册到我们的主模块phonecat上。
...
angular.module('phonecat', ['phonecatFilters']).
...
在AngularJS模板中使用过滤器的语法是：{{ expression | filter }}
因此，我们把过滤器应用到手机详细信息模板中是这样写的：
...
<dl>
<dt>Infrared</dt>
<dd>{{phone.connectivity.infrared | checkmark}}</dd>
<dt>GPS</dt>
<dd>{{phone.connectivity.gps | checkmark}}</dd>
</dl>
...
这样就实现了这样的一个功能：手机详细页面原来是显示“true”或者“false”来说明某个手机是否具有特定的特性。现在我们使用一个定制的过滤器来把那些文本串图形化：√作为“true”；以及×作为“false”。也就说，在手机详细页面，true变成了√，false变成了×。
最后，我们让手机详细信息页面上的手机图片可以点击。
手机详细信息视图展示了一幅当前手机的大号图片，以及几个小一点的缩略图。我们实现当用户点击缩略图就能把那张大的替换成用户点击的那张图片。
...
function PhoneDetailCtrl($scope, $routeParams, $http) {
$http.get('phones/' + $routeParams.phoneId + '.json').success(function(data) {
$scope.phone = data;
$scope.mainImageUrl = data.images[0];
});
$scope.setImage = function(imageUrl) {
$scope.mainImageUrl = imageUrl;
}
}
在PhoneDetailCtrl控制器中，我们创建了mainImageUrl模型属性，并且把它的默认值设为第一个手机图片的URL。
<img ng-src="{{mainImageUrl}}">
...
<ul>
<li ng-repeat="img in phone.images">
<img ng-src="{{img}}" ng-click="setImage(img)">
</li>
</ul>
...
我们把大图片的ngSrc指令绑定到mainImageUrl属性上。