详解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;
 });

service

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

示例

angular.module('app').service('serviceService', function () {
    this.name = 'serviceService';
    this.method = function () {
      console.log('this is ' + this.name);
    }
  });

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

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

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>

//现在创建一个服务用于放入和取出数据，注意这里不能使用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;
  });

  angular.module('app', []).controller('mainCtrl', function (shareData, $scope) {
    $scope.name = 'data';
    shareData.setData('name', $scope.name);
  });

现在我们在mainCtrl这个控制器里面设置了属性，现在我们要在childCtrl里面去读取这个属性

  angular.module('app').controller('childCtrl', function ($scope, shareData) {
    $scope.name = shareData.getData('name');
    console.log($scope.name);  //data
  })

我们可以正常读取到mainCtrl中设置的属性。这就是所谓的controller之间的胶水。

4. 参考文献

AngularJS系统学习之Factory, Service, Provider

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