angularjs中factory, service和provider

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

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

angularjs中有3种创建service的方法：service()，factory()和provider()。

(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()中注入

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，它在设计上和用处上与以上二者区别明显

转自：https://blog.csdn.net/sourcecode_poet/article/details/53509851

巴特西

angularjs中factory, service和provider

最新文章

热门文章