AngularJS XHR和依赖性注入

XHR和依赖性注入

本文主要为你介绍了 AngularJS XHR 和依赖注入，这里整理了详细资料和示例代码 在硬编码的数据集中有三款手机的数据，建立一个应用程序足够了！让我们使用Angular内建的服务之一，$http从服务器上取得更大的数据集我们将使用Angular的依赖性注入（DI）来为PhoneListCtrl控制器提供服务。

- 现在有一个20个电话的列表，从服务器载入。

把工作空间重置到第五步

git checkout -f step-5

刷新你的浏览器或在线检查这一步：Step 5 Live Demo 下面列出了第四步和第五步之间的最重要的区别。你可以在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?"
  ...
 },
...
]

控制器

我们将在控制器中使用Angular的$http服务向你的Web服务器发出HTTP请求，取回app/phones/phones.json文件中的数据。$http是几个用Web应用中来处理常见的操作的内建Angular服务之一。Angular在你需要的地方为你注入了这些服务。
Angular的DI子系统负责管理这些服务。依赖性注入有用助于你的web应用既结构完好（例如，分离表现层、数据和控制三者）以及松弛的耦合（不能由组件自身解决的组件之间的依赖性问题，由DI子系统解决）。

app/js/controllers.js:

var phonecatApp = angular.module('phonecatApp', []);

phonecatApp.controller('PhoneListCtrl', function ($scope, $http) {
  $http.get('phones/phones.json').success(function(data) {
    $scope.phones = data;
  });

  $scope.orderProp = 'age';
});

$http向你的Web服务器发出一个HTTP GET请求，要求phones/phones.json（该url相对于我们的index.html文件）。服务器在json文件中提供该数据，以响应该请求。（响应可能是由后端服务器动态生成的。但是在浏览器和我们的应用看来，它们没什么不同。为了简单起见，我们在本教程中使用了一个json文件。）
该$http服务返回了一个promise对象?，带有success方法。我们调用这个方法以处理异步响应，并假定该作用域的手机数据由该控制器控制，作为一个模块，称为phones。注意Angular侦测了该json响应，并为我们解析了它。
要想在Angular中使用一个服务，你只要声明你所需要的依赖性的名字，作为控制器的构造函数的参数，如下所示：

phonecatApp.controller('PhoneListCtrl', function ($scope, $http) {...}

在构造控制器时，Angular的依赖性注入器会把这些服务注入到你的控制器中。这些依赖性控制器还负责创建该服务可能需要的任何传递依赖性（一个服务通常会依赖于其它服务）。
注意，参数的名称非常重要，因为注入器会用这些名称去查阅依赖性。

依赖注入

$前缀名称约定

你可以创建你自己的服务，而且实际上我们将在第十一步 AngularJS REST和自定义服务做这个。作为一个命名约定，Angular的内建服务，作用域方法以及一些别的Angular API在命名前面使用一个$前缀。
Angular提供的服务的命名空间有$前缀。要想避免冲突，最好避免把你的服务和模块命名成带有$前缀。
如果你检查一个作用域，你可能还会注意到一些属性以$$开头。这些属性被视为是私有属性，不能访问或者修改。

在极简化上的一个注记

因为Angular从参数的名称调用控制器的依赖性到控制器构造器的函数，如果你打算为PhoneListCtrl控制器缩小JavaScript代码，所有的函数参数都会被压缩，而且依赖性注入器将不能正确的识别服务。 我们可以克服这个问题，通过用依赖性的名称注释这个函数，作为字符串提供，它不会被压缩。提供这种注入注释有两种方法：
在控制器函数中创建一个$inject属性，它可携带一个字符串数组。在数组中的每个字符串都是要注入到对应的参数上的服务的名称。我们可以在自己的示例中这样写：

function PhoneListCtrl($scope, $http) {...}
 PhoneListCtrl.$inject = ['$scope', '$http'];
 phonecatApp.controller('PhoneListCtrl', PhoneListCtrl);

在那里使用一个内联注释，并非是只提供这个函数，你还提供了一个数组。这个数组包含了一系列服务名称，后跟着函数本身。

function PhoneListCtrl($scope, $http) {...}
 phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', PhoneListCtrl]);

两种方法都能与Angular注入的任何函数完美协作，因此要选用哪种方法完全取决于你的项目的编程风格。 如果使用第二种方法，在注册控制器时，通常以匿名函数的形式提供内联的构造器函数。

phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', function($scope, $http) {...}]);

从此刻开始，我们将在本教程中使用内联方法。考虑到这一点，让我们把注释加到PhoneListCtrl上： app/js/controllers.js:

var phonecatApp = angular.module('phonecatApp', []);

phonecatApp.controller('PhoneListCtrl', ['$scope', '$http',
  function ($scope, $http) {
    $http.get('phones/phones.json').success(function(data) {
      $scope.phones = data;
    });

    $scope.orderProp = 'age';
  }]);

测试

test/unit/controllersSpec.js:
因为我们开始使用依赖性注入，而且我们的控制器包含了依赖性，在我们的测试中构造控制器就变得有点复杂了。我们可以使用new操作符，并提供带有某种假的$http实现的构造器。然而，Angular提供了一个模拟$http服务，我们可以用在单元测试中。我们通过调用一个称为$httpBackend服务上的方法，为服务器请求配置了“假的”响应。

describe('PhoneCat controllers', function() {

  describe('PhoneListCtrl', function(){
    var scope, ctrl, $httpBackend;

    // 在每次测试之前载入我们的应用模块定义
    beforeEach(module('phonecatApp'));

    // 注入器会忽略前面和后面的下划线（例如_$httpBackend_）。
    // 这允许我们注入一个服务，然后把它附加到同名变量上，以避免名称冲突
    beforeEach(inject(function(_$httpBackend_, $rootScope, $controller) {
      $httpBackend = _$httpBackend_;
      $httpBackend.expectGET('phones/phones.json').
          respond([{name: 'Nexus S'}, {name: 'Motorola DROID'}]);

      scope = $rootScope.$new();
      ctrl = $controller('PhoneListCtrl', {$scope: scope});
    }));

注意：因为我们在测试环境中载入了Jasmine以及angular-mocks.js，我们得到了两个辅助方法module和inject，用来访问和配置注入器。
我们在测试环境中创建控制器，如下所示：

  • 我们使用inject辅助方法，向Jasmine的beforeEach函数注入$rootScope、$controller和$httpBackend服务的实例，这些实例来自于一个注入器，在每一个测试内部都会被重新创建这个注入器。这保证了每次测试都从一个众所周知的起点开始，每次测试与其它测试相互独立。
  • 通过调用$rootScope.$new()来为我们的控制器创建一个新的作用域。
  • 调用了已注入的$controller函数，以参数的形式传入PhoneListCtrl控制器的名称和创建范围。

因为我们的代码现在使用$http服务以取回我们的控制器中的手机列表数据，在我们创建PhoneListCtrl子作用域之前，我们需要告诉测试套件等待一个后面的请求，来自控制器。我们可以这样做：

  • 请求把$httpBackend服务注入到我们的beforeEach函数中。这是一个在产品环境中的服务的模拟版本，可以响应各种XHR和JSONP请求。该服务的模拟版本允许你编写测试，不需要处理原生的API和与它相关的全局状态——本来这两者都会使测试变成一个噩梦。
  • 使用$httpBackend.expectGET方法规定$httpBackend服务等待之后的HTTP请求，并告诉它如何响应它。注意，直到我们调用$httpBackend.flush方法，才会返回响应。

现在我们作了断言以核实在响应到达之前，作用域上不存在手机模块：

it('should create "phones" model with 2 phones fetched from xhr', function() {
  expect(scope.phones).toBeUndefined();
  $httpBackend.flush();

  expect(scope.phones).toEqual([{name: 'Nexus S'},
                               {name: 'Motorola DROID'}]);
});
  • 通过调用$httpBackend.flush()，我们清空了浏览器中的请求队列。这导致$http服务返回的promise对象由规范的应答来处理。可以在模拟$httpBackend文档中了解为什么必须“清空HTTP请求”的完整解释。
  • 我们制作了断言，核实作用域上已经有手机模块了。
    最后，我们核实已经正确设置了orderProp的默认值。
it('should set the default value of orderProp model', function() {
  expect(scope.orderProp).toBe('age');
});

现在在Karma标签卡中，你应该看到以下的输出： Chrome 22.0: Executed 2 of 2 SUCCESS (0.028 secs / 0.007 secs)

实验

  • 在index.html的底部，添加一个<pre>{{phones | filter:query | orderBy:orderProp | json}}</pre>绑定以查看以json格式显示的手机列表。

  • 在PhoneListCtrl控制器中，通过限制手机的数量为列表的前五个来预处理http响应。在$http回调中使用以下的代码：

    $scope.phones = data.splice(0, 5);

总结

现在你已经知道了使用Angular服务是多么容易（幸亏Angular的依赖性注入），前往第六步 模板连接和图像，在那里你将添加一些手机的缩略图以及一些链接。