在这一步中，我们将会改变我们获取数据的方式。
·我们定义一个代表客户端的自定义服务。使用这个客户端，我们可以用一种更简单的方法向服务端请求数据，而不用处理更底层的API，HTTP方法和URLs。
最重要的变化列举如下，您可以在GitHub上查看全部的不同。
依赖
RESTful功能由Angular的模块提供，这是从Angular核心模块中独立出来的。
由于我们使用了Bower来安装客户端的依赖，这一步更新bower.json配置文件来添加新的依赖：
bower.json:
{ "name": "angular-phonecat", "description": "A starter project for AngularJS", "version": "0.0.0", "homepage": "https://github.com/angular/angular-phonecat", "license": "MIT", "private": true, "dependencies": { "angular": "1.5.x", "angular-mocks": "1.5.x", "angular-resource": "1.5.x", "angular-route": "1.5.x", "bootstrap": "3.3.x" }}
新的依赖"angular-resource": "1.5.x"告诉bower安装一个与Angular1.5.x版本兼容的angular-resource模块。我们必须告诉bower来下载和安装该依赖。
npm install
服务
我们在服务端创建我们自己的服务来提供获取数据的入口。我们将服务置于其自己的模块，在core下，以便我们能直接在ngResource中声明其依赖：
app/core/phone/phone.module.js:
angular.module('core.phone', ['ngResource']);
app/core/phone/phone.service.js:
angular. module('core.phone'). factory('Phone', ['$resource', function($resource) { return $resource('phones/:phoneId.json', {}, { query: { method: 'GET', params: {phoneId: 'phones'}, isArray: true } }); } ]); 我们使用来注册一个自定义服务，这使用了一个工厂函数。我们将其在服务的名字--“Phone”--和工厂函数中传递。工厂函数和构造函数很相似，在于两者都能通过函数参数声明将被注入的依赖。Phone服务在$resource服务中声明了一个依赖，这是由ngResource模块提供的。
服务使得创建一个客户端变得很容易，仅仅几行代码即可。该客户端就能在我们的应用中被使用了，以此来代替更底层的服务。
app/core/core.module.js:
angular.module('core', ['core.phone']); 我们需要在core模块中将core.phone模块添加为一个依赖。
模板
我们自定义的服务会在app/core/phone/phone.service.js中被定义，所以我们将该文件连同.module.js文件一起包含进我们的布局模板。另外，我们也需要加载angular-resource.js文件，这包含了ngResource模板：
app/index.html:
... ... ...
组件控制器
现在我们可以通过提取出更底层的$http服务来简化我们的组件控制器（PhoneListController 和 PhoneDetailController），将其替换为新的Phone服务。Angular的$resource作为RESTful资源，相较于$http更易用于与数据源打交道。现在也更好理解我们控制器中的代码在做什么了。
app/phone-list/phone-list.module.js:
angular.module('phoneList', ['core.phone']);
app/phone-list/phone-list.component.js:
angular. module('phoneList'). component('phoneList', { templateUrl: 'phone-list/phone-list.template.html', controller: ['Phone', function PhoneListController(Phone) { this.phones = Phone.query(); this.orderProp = 'age'; } ] }); app/phone-detail/phone-detail.module.js:
angular.module('phoneDetail', ['core.phone']); app/phone-detail/phone-detail.component.js:
angular. module('phoneDetail'). component('phoneDetail', { templateUrl: 'phone-detail/phone-detail.template.html', controller: ['$routeParams', 'Phone', function PhoneDetailController($routeParams, Phone) { var self = this; self.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone) { self.setImage(phone.images[0]); }); self.setImage = function setImage(imageUrl) { self.mainImageUrl = imageUrl; }; } ] }); 注意到在PhoneListController中我们如何替换：
$http.get('phones/phones.json').then(function(response) { self.phones = response.data;}); 为：
this.phones = Phone.query();
这是一句简单且声明式的语句来说明我们想要查询所有的电话。
值得一提的是在上面的代码中，当调用Phone服务中的方法时候，我们没有传递任何回调函数。虽然看上去结果是同步返回了，结果完全不是这样。同步返回的是一个“future”--一个当XHR响应收到时，会被填满数据的对象。由于Angular数据绑定的存在，我们可以将这个future绑定到我们的模板。这样的话，当数据到达时，视图会被自动更新。
有时候，仅仅依赖future对象和数据绑定不能满足我们想做的任何事，在这些情况下，我们可以添加一个回调来运行服务器响应。phoneDetail组件控制器通过在回调中设置mainImageUrl来实现。
总结
既然我们已经知道如何构建一个自定义服务，使其成为一个RESTful客户端，让我们进入下一步来学习如何通过动画来提高用户体验。