同时我们注册一个ngClick处理器到缩略图上。当一个用户点击缩略图的任意一个时，这个处理器会使用setImage事件处理函数来把mainImageUrl属性设置成选定缩略图的URL。
这样就轻易的实现了上面的需求。
对我们应用程序所做的最后一个改进是获取数据的方式。我们可以用一种更简单的方式来发送XHR请求，而不用去关心更底层的$http服务。
angular.module('phonecatServices', ['ngResource']).
factory('Phone', function($resource){
return $resource('phones/:phoneId.json', {}, {
query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
});
});
我们使用模块的API，通过它的工厂方法注册了一个定制服务Phone。我们传入服务的名字Phone和工厂函数。工厂函数和控制器构造函数差不多，它们都通过函数的参数声明，来依赖服务。Phone服务声明了它依赖于$resource服务。
我们需要在页面上加载angularjs-resource.js这个文件，它包含了ngResource模块以及其中的$resource服务：
...
<script src="https://www.linuxidc.com/lib/angular/angular-resource.js"></script>
...
$resource服务，用短短的几行代码就可以创建一个RESTful客户端。我们的应用程序使用这个客户端来代替底层的$http服务。AngularJS的$resource相比于$http更加适合于与RESTful数据源交互。
然后，我们需要把phonecatServices添加到phonecat的依赖数组里。
...
angular.module('phonecat', ['phonecatFilters', 'phonecatServices']).
...
通过重构底层的$http服务，把它放在一个新的服务Phone中，我们可以大大简化子控制器（PhoneListCtrl和PhoneDetailCtrl）。
...
function PhoneListCtrl($scope, Phone) {
$scope.phones = Phone.query();
$scope.orderProp = 'age';
}
//PhoneListCtrl.$inject = ['$scope', 'Phone'];
function PhoneDetailCtrl($scope, $routeParams, Phone) {
$scope.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone) {
$scope.mainImageUrl = phone.images[0];
});
$scope.setImage = function(imageUrl) {
$scope.mainImageUrl = imageUrl;
}
}
//PhoneDetailCtrl.$inject = ['$scope', '$routeParams', 'Phone'];
注意到，在PhoneListCtrl里我们把：
$http.get('phones/phones.json').success(function(data) {
$scope.phones = data;
});
换成了：
$scope.phones = Phone.query();
我们通过这条简单的语句来查询所有的手机。
另一个非常需要注意的是，在上面的代码里面，PhoneListCtrl控制器调用Phone服务的方法时，我们并没有传递任何回调函数。尽管这看起来是同步返回的，其实根本就不是。同步返回的是一个“future”——一个对象，当XHR响应完成返回的时候会填充数据。鉴于AngularJS的数据绑定，我们可以使用future，并且把它绑定到我们的模板上。然后，当数据到达时，我们的视图会自动更新。
但有的时候，单单依赖future对象和数据绑定不足以满足我们的需求，所以在这些情况下，我们需要添加一个回调函数来处理服务器的响应。PhoneDetailCtrl控制器通过在一个回调函数中设置mainImageUrl就是一个解释。
通过这四篇对angular.js的入门讲解，我相信大家都angular有了初步的认识，接下来，我们将深入讲解angular.js。
希望你喜欢，并分享我的工作~带你走近AngularJS系列：
在 AngularJS 应用中通过 JSON 文件来设置状态