脚本宝典收集整理的这篇文章主要介绍了详解AngularJS服务，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
- 背景介绍
什么是服务？
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之间的胶水，数据的走狗，方法的奴隶，它就是我们程序的工蜂！
- 知识剖析
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
- 更多讨论（三个问题）
使用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
<body ng-controller="mainCtrl">
<div ng-controller="childCtrl">
</div>
</body>
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('name');
console.log($scope.name); //data})
1
2
3
4
我们可以正常读取到mainCtrl中设置的属性。 这就是所谓的controller之间的胶水。
- 参考文献
AngularJS系统学习之Factory, Service, Provider
详解Angular中的自定义服务Service、Provider以及Factory
谢谢！
以上是脚本宝典为你收集整理的详解AngularJS服务全部内容，希望文章能够帮你解决详解AngularJS服务所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。