5-XHRs(XmlHttpRequest)与依赖注入

最新推荐文章于 2022-04-13 15:14:55 发布

weixin_34061482

最新推荐文章于 2022-04-13 15:14:55 发布

阅读量258

点赞数

文章标签： json git 后端

原文链接：https://my.oschina.net/markho/blog/498155

版权

为什么80%的码农都做不了架构师？>>>

足以给应用绑定了硬编码数据集中的三条手机数据，让我们从我们的服务中适配更大的数据集，他使用Angular内建的服务中 $htttp。我们将使用Angular的依赖注入给 PhoneListCtrl提供服务。现在有20条手机，从服务器中读取。工作空间重置介绍重置你的工作区间到第五步

git checkout -f step-5

刷新你的浏览器，或者在线上检出这一步：第五步例子。大部分重要的修改都列在下面，你在 GitHub上能看全部不同。

数据

app/phones/phones.json文件在你的项目中是一个数据集，他包含一个用JONS格式存储的手机大列表。下面是简单的文件

[
 {
  "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服务，在我们控制器中制作HTTP请求来从 app/phones/phones.json文件中读取数据。$http是一系列 Angular内建的服务，他在web应用中处理相同的操作，Angular在你需要的地方注入这些服务。服务由Angular的 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制造一个HTTP GET 请求去我们Web服务器，请求 phones/phones.json(这个url放在我们的index.html页面中)，服务器响应json文件中的数据（这个响应可能是后端服务器动态生成，浏览器和我们的应用看到的是一样，在教程为了简单的目的我们使用json文件） $http服务返用成功方法返回一个 Promise对象，对于phones模型，我们调用这个方法去处理异步响应，通过控制器将手机数据赋给scope。注意Angular检测json响应，解析给我们。为了使用Angular中的服务，你简单定义了依赖的名字，做为控制器的构造器的参数，如：

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

当控制器被构建时，Angular的依赖注入器提供服务给你的控制器，依赖注入器也小心地创建服务可能有的过渡依赖（服务可能依赖其他服务）。注意参数的名字很重要，因为注册器用他们寻找依赖。

$前缀命名规定

你可以创建自己的服务，实际上我们恰好在做第11步的事，做为命名规定，Angular的内建服务，范围方法和其他一些Angular 应用接口在名字前有$前缀。 $前缀在这里是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服务，我们能用他来做单元测试，我们配置“假”响应服务通过调用服务上的方法，服务响应。

describe('PhoneCat controllers', function() {

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

  // Load our app module definition before each test.
  beforeEach(module('phonecatApp'));

  // The injector ignores leading and trailing underscores here (i.e. _$httpBackend_).
  // This allows us to inject a service but then attach it to a variable
  // with the same name as the service in order to avoid a name conflict.
  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});
  }));

注意：因为在我们的测试环境中读取Jasmin和angular-mocks.js，我们用两个帮助方法 module和 inject来读取各配置注入器。我们在测试环境中创建控制器，如下：

我们使用inject帮助方法去注入$rootScope,$controller和$httpBackend服务实例给Jasmine的beforeEach函数，这些实例来自注入器，每个单个测试都会被重新创建，这样确实每个测试开始于好的开始点，每个测试工作时与其他测试都隔离开。
我们创建一个中$rootScope.$new()的新范围给我们的控制器。
我们调用注入的$controller函数，通过名叫PhoneListCtrl的控制器，并创建一个scope做为参数。

因为我们在控制器中使用了 $http服务读取数据，在我们创建PhoneListCtrl子scope之前，我们告诉测试从控制器中驾驭一个期望的请求，我们这样做：

请求$httpBackend服务注入到beforeEach函数，模拟版本的服务在生产环境能使XHR和JSONP请求更容易，模拟版本的服务允许你在没有本地API和全局状态关联情况下写测试，他们两个都让测试成为噩梦。
使用$httpBackend.expectGET方法让$httpBackend服务期待Http请求到来，并告诉他怎么返回，注意响应直到调用$httpBackend.flush方法后才会返回。

现在让我们创建一个断言验证phones模型在响应接到之前不存在于scope中。

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服务用准备好的response产生promise的返回值。在mock $httpBackend文档中看‘刷入Http请求’，解释为什么这是必须的。
我们创建断言，验证手机模型现在存在有scope中。

最后，我们验证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控制器中，通过限制列表第一次手机的数目到5来预处理HTTP响应。在回调时，使用下面的代码。