[Angular Tutorial] 13 -REST and Custom Services

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[Angular Tutorial] 13 -REST and Custom Services相关的知识,希望对你有一定的参考价值。

在这一步中,我们将会改变我们获取数据的方式。

  ·我们定义一个代表RESTful客户端的自定义服务。使用这个客户端,我们可以用一种更简单的方法向服务端请求数据,而不用处理更底层的$httpAPI,HTTP方法和URLs。

最重要的变化列举如下,您可以点击这里在GitHub上查看全部的不同。

依赖

RESTful功能由Angular的ngResource模块提供,这是从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
        }
      });
    }
  ]);

我们使用模块API来注册一个自定义服务,这使用了一个工厂函数。我们将其在服务的名字--“Phone”--和工厂函数中传递。工厂函数和构造函数很相似,在于两者都能通过函数参数声明将被注入的依赖。Phone服务在$resource服务中声明了一个依赖,这是由ngResource模块提供的。

$resource服务使得创建一个RESTful客户端变得很容易,仅仅几行代码即可。该客户端就能在我们的应用中被使用了,以此来代替更底层的$http服务。

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:

 

<head>
  ...
  <script src="bower_components/angular-resource/angular-resource.js"></script>
  ...
  <script src="core/phone/phone.module.js"></script>
  <script src="core/phone/phone.service.js"></script>
  ...
</head>

 

组件控制器

现在我们可以通过提取出更底层的$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客户端,让我们进入下一步来学习如何通过动画来提高用户体验。

 

以上是关于[Angular Tutorial] 13 -REST and Custom Services的主要内容,如果未能解决你的问题,请参考以下文章

[Angular Tutorial] 1-Static Template

[Angular Tutorial] 0-Bootstraping

[Angular Tutorial] 8 - Templating Links & Images

[Angular Tutorial] 3-Components

[Angular Tutorial] 3-Filtering Repeaters

[Angular Tutorial] 14 -Animations