详解AngularJS服务

1. 背景介绍
   什么是服务？
   Services are designed to be the glue between controllers, the minions of data, the slaves of functionality, the worker-bees of our application.

以上是Angular团队对于服务的定义，翻译过来就是说 services是被用来设计成controller之间的胶水，数据的走狗，方法的奴隶，它就是我们程序的工蜂！

2. 知识剖析
   AngularJS内置服务
   AngularJS内置了很多服务，我们看一下常用的AngularJS的服务

服务 描述
$http 向服务器发送请求并接受响应数据
$location 获取路径及修改路径服务
$setTimeout 对应于原生setTimeout方法
$interval 对应于原生interval方法
更多的内置服务请读者自行百度

AngularJS 自定义服务
创建自定义服务的三种方式

factory()
service()
provider()
factory

factory()让我们通过返回一个包含service方法和数据的对象来定义一个service
实际上factory方式创建的服务，作用就是返回一个有属性有方法的对象，我们可以在controller或其他服务中调用这个对象的的方法和属性。

示例

//shareData是这个服务的名称
angular.module(‘app’).factory(‘shareData’, function () {
let service = {
setData: function (propertyName, value) {
this[propertyName] = value;
},
getData: function (propertyName) {
return this[propertyName];
}
}
return service;
});
1
2
3
4
5
6
7
8
9
10
11
12
service

service()方法创建服务的方法与factory类似，只是不需要返回一个对象，而是将属性与方法直接写在this内就OK了。

示例

angular.module(‘app’).service(‘serviceService’, function () {
this.name = ‘serviceService’;
this.method = function () {
console.log('this is ’ + this.name);
}
});
1
2
3
4
5
6
provider

如果我们需要在启用服务之间对这个服务进行参数配置(使用config()方法)，那么这个服务必须用provider来创建。需要使用this.$get来返回一个对象，这个对象包含了服务的属性和方法。

示例

angular.module(‘app’).provider(‘providerService’, function () {
let name;
this.setName = function (newName) {
name = newName;
};
this.$get = function () {
return {
getName: function () {
console.log(myName is ${name});
return name;
}
}
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
3. 更多讨论（三个问题）
使用provider创建的服务如何对其进行配置？

使用config()方法，注意，在注入服务的时候服务的名称不是创建的服务名称，需要在服务名后面再加上’Provider’

示例

angular.module(‘app’).provider(‘providerService’, function () {
let name;
this.setName = function (newName) {
name = newName;
};
this.$get = function () {
return {
getName: function () {
console.log(myName is ${name});
return name;
}
}
}
});
//注意下面注入的服务的名称为providerServiceProvider 而不是 providerService
angular.module(‘app’).config(function (providerServiceProvider) {
providerServiceProvider.setName(‘newName’);
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
factory, service, provider创建服务的方式是通用的吗?

不是！ factory和service创建的服务的方式类似，换句话说factory和service可以互相替代，但是provider创建的可配置的服务， service和 factory却无法创建，也就是说 factory和service 无法替代provider！

如何利用服务在controller 之间传递数据。

本文开头就讲了服务是controller 之间的胶水， 因为service 在angular中是单例的。每个服务都只有一个实例，它相当于就是一个中介，我们可以在两个控制器中都注入这个服务，然后通过这个服务来传递一些数据。

示例：
有如下结构的html

1 2 3 4 //现在创建一个服务用于放入和取出数据，注意这里不能使用this.propertyName的方式来设置和读取属性 angular.module('app').factory('shareData', function () { let service = { setData: function (propertyName, value) { this[propertyName] = value; }, getData: function (propertyName) { return this[propertyName]; } } return service; }); 1 2 3 4 5 6 7 8 9 10 11 12 angular.module('app', []).controller('mainCtrl', function (shareData, $scope) { $scope.name = 'data'; shareData.setData('name', $scope.name); }); 1 2 3 4 现在我们在mainCtrl这个控制器里面设置了属性，现在我们要在childCtrl里面去读取这个属性

angular.module(‘app’).controller(‘childCtrl’, function ($scope, shareData) {
$scope.name=shareData.getData{(}^{\prime }nam{e}^{\prime });console.log($scope.name); //data
})
1
2
3
4
我们可以正常读取到mainCtrl中设置的属性。 这就是所谓的controller之间的胶水。

4. 参考文献
   AngularJS系统学习之Factory, Service, Provider

详解Angular中的自定义服务Service、Provider以及Factory