详解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服务

用户bPbdDlb

引用和评论

什么是session？什么是cookie？session和cookie有什么区别？

CSS团队协作规范

100个React最佳实践小技巧

不使用 JS 纯 CSS 获取屏幕宽高

前端开发工具

开发插件集合

CSS 现在终于支持高度 auto 过渡动画了