[Angular Tutorial] 7-XHRs & Dependency Injection

我们受够了在应用中用硬编码的方法嵌入三部电话！现在让我们用Angular内建的叫做$http的服务来从我们的服务器获取更大的数据集吧。我们将会使用Angular的依赖注入来为PhoneListCtrl控制器提供服务。

　　·现在我们有一个20部电话的列表，它们都是从服务器加载而来。

最重要的变化列举如下，当然您也可以点击这里在GitHub上查看所有的不同。

数据

你项目中的app/phones/phones.json文件是一个使用了JSON格式的一个更大的电话数据集合。

下面是一个文件的样本：

[
 {
  "age": 13,
  "id": "motorola-defy-with-motoblur",
  "name": "Motorola DEFY\u2122 with MOTOBLUR\u2122",
  "snippet": "Are you ready for everything life throws your way?"
  ...
 },
...
]

组件控制器

我们将会在控制器中使用Anglular的$http服务来想服务端发送一个HTTP请求，以此来从app/phones/phones.json文件中获取数据。$http仅仅是Angular自带的几个服务之一，这些服务在web应用中处理公共的操作。当您需要这些服务的时候，Angular将为您注入它们。

服务是由Angular的DI子系统管理的，依赖注入可以使您的web应用同时保持良好的组织结构（比如：展示层，数据层和控制器的独立组成）和松耦合（各组件间的依赖是由DI子系统而不是由组件自身决定的）。

app/phone-list/phone-list.component.js:

angular.
  module('phoneList').
  component('phoneList', {
    templateUrl: 'phone-list/phone-list.template.html',
    controller: function PhoneListController($http) {
      var self = this;
      self.orderProp = 'age';

      $http.get('phones/phones.json').then(function(response) {
        self.phones = response.data;
      });
    }
  });

$http向我们的web服务端发送一个HTTP GET请求，请求phones.json（该url相对于我们的index.html文件）。服务端通过返回JSON文件中的数据作为响应（改响应可能刚好被后端服务器动态生成。对于浏览器和我们的应用来说，它们看起来是一样的。为了简单起见，我们在这篇tutorial中使用了一个JSON文件）。

$http服务通过then()方法返回一个promise对象。我们调用这个方法来处理异步相应并且将电话数据分配给控制器中一个叫做phones的属性。注意到Angular已经检测到了JSON响应并且为我们解析它，将其导入response对象（被传递至我们的回调函数）中的data属性！

因为我们在一个回调函数中为phones属性分配任务，而this的值在此处没有被定义，所以我们也会引进一个叫做self的局部变量来指向控制器实体。

为了在Angular中使用服务，您仅仅需要声明您需要的依赖的名字，并将其作为控制器构造函数的参数，如下所示：

function PhoneListController($http) {...}

控制器被构建时，Angular的依赖注入器为您的控制器提供服务。依赖注入器也会注意创建任何这个服务需要的传递性依赖（服务经常依赖于其他服务）。

注意到这些参数的名字是非常重要的，因为注入器将使用它们来寻找依赖。

$-前缀命名规范

您可以创建您自己的服务，我们会在接下来的步骤中做这件事。正如命名规范，Angular内置的服务，Scope方法和少量其他的Angular API 都在它们的名字前都有一个$前缀。

$前缀是Angular提供的服务的命名空间。为了防止冲突，您最好避免以一个$为前缀来命名您的服务和数据模型。

如果您检查一个Scope，您可能会注意到一些属性以$$作为前缀。这些属性被认为是私有的(private),并且不应当被获取或修改。

一点关于压缩的笔记

由于Angular是通过控制器构造函数的参数的名字来推断控制器的依赖的，如果您想要压缩PhoneListContrller控制器的js代码，所有的函数参数也会被压缩，那么依赖注入器将不会被服务正确识别。

我们可以通过用依赖的名字来注释函数来解决这个问题，用string数组提供，这不会被压缩，有两种方法来提供注入注释：

　　·在控制器中创建一个$inject属性来记录一个string的数组。该数组中的每一个string是将要注入服务的对应参数，在我们例子中，我们可以这样写：

function PhoneListController($http) {...}
PhoneListController.$inject = ['$http'];
...
.component('phoneList', {..., controller: PhoneListController});

　　·使用一个内联注释，而不是仅仅提供一个函数，而是提供一个数组，这个数组包含服务名称的列表，并且跟随函数本身。

function PhoneListController($http) {...}
...
.component('phoneList', {..., controller: ['$http', PhoneListController]});

上述两种方法都可以在任何能被Angular注入的函数中起作用，所以您的编程风格将决定您使用哪一种。

当使用第二种方法时，一种常见的做法是在注册控制器时将构造函数内联成一个匿名函数：

.component('phoneList', {..., controller: ['$http', function PhoneListController($http) {...}]});

继续下去，我们将在tutorial中使用内联方法。记住这个，让我们为我们的PhoneListController添加注释：

app/phone-list/phone-list.component.js

angular.
  module('phoneList').
  component('phoneList', {
    templateUrl: 'phone-list/phone-list.template.html',
    controller: ['$http',
      function PhoneListController($http) {
        var self = this;
        self.orderProp = 'age';

        $http.get('phones/phones.json').then(function(response) {
          self.phones = response.data;
        });
      }
    ]
  });

　　

实验　　

在phone-list.template.html的底部，添加<pre>{{$ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.orderProp | json}}</pre>绑定来看看以JSON格式展示的电话列表。

在PhoneListController控制器中，可以做限制只返回第1到第5部电话的数据的预处理，在$http回调中使用如下代码：

self.phones = response.data.slice(0, 5);

总结

现在您已经知道使用Angular 服务是多么容易了吧（多亏Angular的依赖注入）。进入第八步，您将添加一些电话的略图和一些链接。