AngularJS教程之三 服务与依赖注入

上页

　　在第一章里，我们知道Angular提供的标准服务组件有以下：

$http：用于处理 XMLHttpRequest

$location：提供当前URL的信息

$q： 异步请求使用，promise/deferred模块

$routeProvider：配置路由

$log：日志服务

我们看看最常用和调用后端的$http的用法：

$http有下面短方法：$http.get() $http.head() $http.post() $http.put() $http.delete() $http.jsonp()

我们假设调用后端的REST URL是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?"
  ...
 },
...
]

AngularJS的所有Service服务组件都是由依赖注入管理的，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';
});

注意到：

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

这表示创建一个名称为'PhoneListCtrl'的服务，其内容是function ($scope, $http) {...}，也就是类似

var PhoneListCtrl =function ($scope, $http) {...}

Angular将PhoneListCtrl注入到控制器中，当然PhoneListCtrl也依赖于$scope和$http，它们也是一样，都是被注入器注入。

$http 实现对后端Web服务器的GET请求，URL是： phone/phones.json，路径是相对于当前 index.html文件

当$http成功后success 方法返回一个promise($q)对象。参考：结合RxJS + AngularJS实现异步处理

我们可以使用返回的数据Data赋值到当前的作用域(胶水)$scope中。angular会侦测到JSON响应，然后转换成类似数组的格式。

创建自己的服务

　　虽然AngularJS提过了很多有用的服务，但是如果你要创建一个很棒的应用，你可能还是要写自己的服务。你可以通过在模块Module api中注册一个服务工厂函数，或者通过Modeul#factory api或者直接通过模块配置函数中的$provide api来实现。

　　所有的服务都符合依赖注入的原则。它们用一个唯一的名字将自己注册进AngularJS的依赖注入系统（injector），并且声明需要提供给工厂函数的依赖。

使用angular.Module api注册服务:

var myModule = angular.module('myModule', []);
myModule.factory('serviceId', function() {
  var shinyNewServiceInstance;
  //factory function body that constructs shinyNewServiceInstance
  return shinyNewServiceInstance;
});

使用$provide服务:

angular.module('myModule', [], function($provide) {
  $provide.factory('serviceId', function() {
    var shinyNewServiceInstance;
    //factory function body that constructs shinyNewServiceInstance
    return shinyNewServiceInstance;
  });
});

$的命名约定

　　前缀$是表示 Angular自己提供的服务名称，如$scope或$provide等，为了防止冲突，最好避免命名自己开发的服务以为$开头。

　　如果你检查一个scope内部，你也可能会发现一些属性开头也是以 $开头。这些特性被认为是私有的，并且不应该访问或修改。

下面这个代码是将$window注入到自己的服务中：

angular.module('myModule', [], function($provide) {
  $provide.factory('notify', ['$window', function(win) {
    var msgs = [];
    return function(msg) {
      msgs.push(msg);
      if (msgs.length == 3) {
        win.alert(msgs.join("\n"));
        msgs = [];
      }
    };
  }]);
});

这是一个通知服务，将消息发送到所有Angular提供的window窗口中显示。

　　要注意的是所有AngularJS服务都是单例的。这意味着在每一个注入器中都只有一个需要的服务的实例。因为AngularJS极度讨厌全局的东西，这是符合面向对象ＯＯ。

我们经常会使用压缩简写对javascript进行缩小，以便获取更小的文件更快下载，压缩简写minfy可能对AngularJS注入有影响。用以下办法：

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

使用PhoneListCtrl.$inject 主动注入两个依赖。或者用括号符号[ ]

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

这样之前案例控制器代码就写成了：

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

$resource服务与ＲＥＳＴ