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

时间:2022-02-25 01:21:34

首先说一下服务这个东西是用来干嘛的。很多时候我们把太多的数据和逻辑都一股脑儿地往 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() " ;
      })