AngularJS入门教程之XHR和依赖注入详解

一直以来，我们都是在使用硬编码的数据集来展示手机记录。今天我们将跨越一大步，采用AngularJS内置的$http服务来获取更大规模的手机记录数据集。我们将借助AngularJS的依赖注入（DI）功能，轻松地将这一服务集成到PhoneListCtrl控制器中。

让我们先回到工作目录的初始状态。通过执行git checkout -f step-5命令，确保你的工作目录已经重置到了第五步的状态。接下来，刷新浏览器，你将看到一张包含20部手机的列表。这一步与前一步的主要区别在于数据获取方式的改变。你可以在GitHub上查看完整的差异对比。

关于数据方面，app/phones/phones.json文件就是我们存储更大手机列表的数据集。这是一个简单的JSON格式文件，作为样例展示在狼蚁网站SEO优化列表中。文件内容大致如下：

```json

[

{

"age": 13,

"id": "motorola-defy-with-motoblur",

"name": "Motorola DEFY™ with MOTOBLUR™",

"snippet": "Are you ready for everything life throws your way?"

...

},

...

]

```

接下来，让我们聚焦于控制器部分。我们将使用AngularJS的$http服务向Web服务器发起一个HTTP请求，从app/phones/phones.json文件中获取数据。$http仅仅是AngularJS众多内置服务中的一员，它能够处理Web应用的通用操作。AngularJS能够将这些服务注入到任何需要它们的地方。这些服务的背后是依赖注入（DI）子系统，它使得Web应用的结构更加清晰和松耦合。这意味着一个组件不需要关心如何获取其他组件的数据或服务，DI子系统会处理这一切。下面是一个简单的示例代码片段：

```javascript

function PhoneListCtrl($scope, $http) {

$http.get('phones/phones.json').then(function(response) {

$scope.phones = response.data; // 使用响应中的数据更新作用域中的phone模型

});

$scope.orderProp = 'age'; // 默认排序属性设置为年龄（age）字段

}

关于压缩PhoneListCtrl控制器JS代码的问题

当我们尝试压缩PhoneListCtrl控制器的JS代码时，所有的参数都会被相应地压缩。这可能会导致依赖注入系统无法正确识别服务，因为压缩后的代码可能会改变原有的结构和顺序。

为了解决这个问题，我们可以采用一种简单而有效的方法。在控制器函数中，给$inject属性赋予一个包含依赖服务标识符的数组。这样，即使代码被压缩，系统也能准确地识别出所需的依赖服务。就像这样：PhoneListCtrl.$inject = ['$scope', '$http'];这样，我们的控制器就能正常工作，无论代码是否被压缩。

另一种解决方案是采用JavaScript数组的方式来构造控制器。我们将要注入的服务放在一个字符串数组里，这个数组代表的是依赖服务的名字。然后，将这个数组和控制器的方法函数一起传入。这种方法同样可以避免因代码压缩带来的问题。示例如下：

var PhoneListCtrl = ['$scope', '$http', function($scope, $http) { / 控制器的构造体 / }];

这两种方法都能与AngularJS中的任何可注入函数完美协作。选择哪种方法主要取决于你项目的编程风格。推荐使用数组方式，因为它更加直观，易于理解。

AngularJS：创建“手机”模型与设置默认值

在前端开发中，AngularJS 框架为我们提供了强大的工具来管理和操作数据模型。今天，我们将如何使用 AngularJS 来创建一个“手机”模型，并为其设置默认值。

让我们关注一个特定的测试场景，即创建一个“手机”模型并从 xhr 获取两部手机的信息。在测试代码中，我们首先断言（expect）`scope.phones`是未定义的，然后通过调用 `$httpBackend.flush()` 来清空请求队列，使得 $http 服务返回的 promise 能够被解释成规范的应答。接着，我们验证手机数据模型是否已经在作用域里，并且包含两部手机的信息，分别是 'Nexus S' 和 'Motorola DROID'。

接下来，我们转向设置`orderProp`模型的默认值。我们断言 `scope.orderProp`的默认值是否为 'age'。这样，我们可以确保在应用程序初始化时，`orderProp`模型被正确设置。

现在，让我们在实战中操作一下。在 index.html 文件的末尾，我们可以添加一个 {{phones | json}} 绑定，这样我们就可以在浏览器中观察到以 json 格式呈现的手机列表。

为了进一步优化我们的应用程序，我们可以在 PhoneListCtrl 控制器中对 HTTP 应答进行预处理，以便只显示手机列表的前五个。这可以通过在 $http 回调函数中编写 `$scope.phones = data.splice(0, 5);` 来实现。

使用 AngularJS 的服务是如此简单，这归功于 AngularJS 服务的依赖注入机制。在继续学习 AngularJS 的过程中，我们将更多高级功能，如为手机添加缩略图和链接。

在这个过程中，大家如果有任何疑问或需要进一步的指导，都可以随时向我们提问。我们会继续更新相关文章，帮助大家深入掌握 AngularJS 的知识和技巧。感谢大家对本站的支持，让我们共同学习，共同进步！

我们使用 cambrian.render('body') 来渲染页面的主体部分，完成这一步骤。希望大家能够更好地理解如何在 AngularJS 中创建手机数据模型并为其设置默认值。