angularJs中service的三种方法以及区别（factory,service,provider三者的区别）

最新推荐文章于 2018-09-20 15:34:43 发布

lqdcanty

最新推荐文章于 2018-09-20 15:34:43 发布

阅读量1k

点赞数

分类专栏： angular 文章标签： angular service factory provider

angular 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.引言

在angularJS中service是我们经常用到的一个东西，从最开始，我们就知道service有三种方法，service()，factory()和provider()
三者的异同和应用场景也是经久不衰的话题，网上有大量的文章和代码讨论三者的使用和区别
但其中多数说的都一知半解，让人一头雾水，今天让我们聊聊angularJS中的service

2.service的作用

在Angular里面，services作为单例对象在需要到的时候被创建，只有在应用生命周期结束的时候（关闭浏览器）才会被清除。而controllers在不需要的时候就会被销毁了（因为service的底层机制是通过闭包实现，如果过分使用会导致内存泄露从而导致性能问题）

这就是为什么使用controllers在应用里面传递数据不可靠的原因，特别是使用angular路由的时候。
援引angular团队的原话：
Services are designed to be the glue between controllers, the minions of data, the slaves of functionality, the worker-bees of our application
翻译一下：services是被用来设计成controller之间的胶水，数据的走狗，方法的奴隶，它就是我们程序的工蜂！
也就是说service本来就是为我们的应用程序服务的，只要合理运用，可以解决很多问题。

3.如何创建一个service
每个service方法中，我们都会看到两个参数：
1.name------service的名字
2.function------service中包含的代码

(1) factory()
Angular里面创建service最简单的方式是使用factory()方法
factory()让我们通过返回一个包含service方法和数据的对象来定义一个service
在service方法里面我们可以注入services，比如 $http 和 $q等
factory()的示例代码：

 angular.module('myApp.services')
.factory('User', function($http) { // factory的名字和注入的方法
 var backendUrl = "http://localhost:3000"; 
 var service = {    //把我们定义的方法和数据都放到一个对象中，并且返回这个对象，这就是factory
   user: {},   //数据
   setName: function(newName) {  //方法
     service.user['name'] = newName; 
   },
   setEmail: function(newEmail) {
     service.user['email'] = newEmail;
   },
   save: function() {
     return $http.post(backendUrl + '/users', {
       user: service.user
     });
    }
 };  
 return service;
});

在controller中使用factory()，将factory的名字注入即可

angular.module('myApp')
.controller('MainCtrl', function($scope, User) { //User就是factory()的名字
  $scope.saveUser = User.save;   //我们将User这个factory中的一个叫做save()的function赋给我们controller中的变量
});

什么时候使用factory()？
在service里面当我们仅仅需要的是一个方法和数据的集合且不需要处理复杂的逻辑的时候，factory()是一个非常不错的选择
也就是说，我们可以用factory()来当做一个仓库，存储着我们的function和data
注意：需要使用.config()来配置service的时候不能使用factory()方法

(2) service()
service()通过构造函数的方式让我们创建service，和factory()方法一样我们也可以在函数的定义里面看到服务的注入
service()示例代码：

  angular.module('myApp.services')
.service('User', function($http) { // 在这里注入我们需要的服务
  var self = this;  //由于service()是通过构造函数创建的，那么service()中的function和data都要以this.data和this.function的方式进行声明
                           //service()方法会持有构造函数创建的对象
   this.user = {};
   this.backendUrl = "http://localhost:3000";
   this.setName = function(newName) {
     self.user['name'] = newName;
   }
   this.setEmail = function(newEmail) {
     self.user['email'] = newEmail;
   }
   this.save = function() {
     return $http.post(self.backendUrl + '/users', {
     user: self.user
   })
 }
});

在controller中使用service()，和factory()一样，将service的名字注入到controller中即可

 angular.module('myApp')
.controller('MainCtrl', function($scope, User) {//注入名字为User的service
  $scope.saveUser = User.save;   //用User中名字叫做的save的function给本地变量赋值
 });

什么时候使用service()？
与factory()相比，由于service是通过构造函数的方式创造的，且持有创造对象本身，所以当我们在功能比较复杂的情况下，可以
通过service()中的方法和数据对controller中的变量进行赋值，从某种角度来说，service()和factory()的实现方式不同，但是二者在使用场景上却很接近
注意：需要使用.config()来配置service的时候不能使用service()方法

(3)provider
provider()是创建service最底层的方式，这也是唯一一个可以使用.config()方法配置创建service的方法
provider()不同于service()和factory()，在注入其他的服务的时候不能在function()中注入
provider示例代码：

  angular.module('myApp.services')
 .provider('User', function() {
   this.backendUrl = "http://localhost:3000";
   this.setBackendUrl = function(newUrl) {
       if (url) this.backendUrl = newUrl;
    }
   this.$get = function($http) { // 在这里注入其他服务，不同于factory()与service()中的在function()中引入
   var service = {
      user: {},
      setName: function(newName) {
      service.user['name'] = newName;
      },
      setEmail: function(newEmail) {
        service.user['email'] = newEmail;
      },
      save: function() {
        return $http.post(self.backendUrl + '/users', {
        user: service.user
      })
    }
  };
  return service;
}
});

provider()是唯一一个可以在config()中进行配置的service
示例代码：

angular.module('myApp')
.config(function(UserProvider) {  //在.config()中配置provider
   UserProvider.setBackendUrl("http://myApiBackend.com/api");
 })

配置之后，我们才可以在controller中正常使用provider()

示例代码：

angular.module('myApp')
.controller('MainCtrl', function($scope, User) { //注入名字为User的provider()
  $scope.saveUser = User.save;
});

什么时候使用.provider()？
1.当我们希望在应用开始前对service进行配置的时候就需要使用到provider()。比如，比如我们开发时要用到多个环境，测试环境，正式环境等，我们在应用初始化时，可以对provider()进行初始化

2.当我们打包发布时，如果我们要用到可配置的service时，我们必须选择provider()

总结：
1.factory()就像一个仓库一样，存储着我们的方法和数据
2.service()在创建时会持有当前对象，调用了这个service()的对象就会被赋值（方法或者数据）
3.provider()是唯一一个可以在config()中进行配置的service，它在设计上和用处上与以上二者区别明显