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服务与ＲＥＳＴ
$resource是一个依赖$Http的服务组件，它创建了一个资源对象，让你与RESTful服务器端数据源实现交互的工厂。返回的是资源对象，提供了高层次的行为，而不需要与低级别$ HTTP服务交互操作方法。需要ngResource 安装(<script src="lib/angular/angular-resource.js"></script>)。具体用法见API
：
对返回的数据进行默认的如下操作：
{ 'get': {method:'GET'},
'save': {method:'POST'},
'query': {method:'GET', isArray:true},
'remove': {method:'DELETE'},
'delete': {method:'DELETE'} };
例如：
var User = $resource('/user/:userId', {userId:'@id'});
var user = User.get({userId:123}, function() {
user.abc = true;
user.$save();
});
User定义为资源$resource类型，小写的user是其一个实例，实际是从服务器抓取的根据id为123的一个User Json数组，那么我们下面可以对user这个实例使用上面几个默认操作，比如user.$save();。可以轻松地执行CRUD操作（创建，读取，更新，删除）。
总结为：
var object = Data.get({id:123}, function() {
object.isDefault = true;
object.$save();
});
下面以phone举例返回列表：
var phonecatServices = angular.module('phonecatServices', ['ngResource']);
phonecatServices.factory('Phone', ['$resource',
function($resource){
return $resource('phones/:phoneId.json', {}, {
query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
});
}]);
这是从后台返回phone列表的$resource用法。节省了$http之类转换。