AngularJS 笔记之创建服务方式比较 ： factory vs service vs provider 。

Posted 2020-06-17 加勒比海豹丶

首先说一下服务这个东西是用来干嘛的。很多时候我们把太多的数据和逻辑都一股脑儿地往 controller 里放。这样我们的 controller 原来越臃肿。从它们的生命周期可以发现，其实 controller 应该在需要的时候被初始化，不用了就直接被抛弃，释放内存。因此，当我们切换或者刷新页面的时候，angular 就会清空当前的 controller。与所以，service 才应该被用来保存应用业务逻辑和持久化的数据，并且这些数据可以在不同的 controller 之间应用。

那么问题来了，（学挖掘机找蓝翔吗）Angular 提供了三种方法来创建并注册我们的 service：factory, service 和 provider 。

Factory :

• 用 factory 就是创建一个对象，为他添加属性，然后把这个对象 return 出来。当你把 service 传进 controller 以后，在 controller 中这个对象的属性就可以通过 factory 使用了。
  • var app = angular.module(‘app‘,[]);
  • app.factory(‘myFactory‘,function(){
  •   var test = {};
  •   test.name = "Jason";
  •   test.sayHello = function(){console.log("hello world")};
  •   return test;
  • });
  • app.controller("myCtrl",function($scope,myFactory){
    　$scope.greet =myFactory.test.sayHello;
       //use the attrs of the obj in the factory
  • })
  • 这大概就是 factory 的用法了。
    
    
• Service:
  
  • service 是用 new 关键字实例化的。因此，你应该给 this 添加属性，然后 service 返回 this。你把 service 传进 controller 以后，在 controller 里 this 上的属性就可以用通过 service 来使用了。
  • app.service(‘myService‘,function(){
        var _artist = "Nelly";
        this.getAritist = function(){
        return _artist;
    }
    });
    app.controller("myCtrl",function($scope,myService){
        $scope.getArtist = myService.getArtist;
    });
    
    
    
    
• Provider :
  
  • Providers 是唯一一种你可以传进 .config() 函数的 service。当你想要在 service 对象启用之前，先进行模块范围的配置，那就应该用 provider。
  • app.provider("myProvider",function(){
        this._artist = " " ;
        this.thingFromConfig = " " ;
        this.$get = function(){
            var that  =  this;
            return  {
               getArtist : function(){
                   return that._artist;
                },
      　　    thingOnConfig : that.thingFromConfig
            }
       },
       thingOnConfig 
    });
    
    app.controller("myController",function($scope,myProvider){
        $scope.artist = myProvider.getArtist();
        $scope.data.thingFromConfig = myProvider.thingOnConfig;
    });
    
    app.config(function(myProviderProvider){
        myProviderProvider.thingFromConfig = "This was set in config() " ;
    })