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子系统解决）。

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';
});