AngularJS 核心:$Provide

AngularJS 核心:$Provide

$provide负责给Angular创造一个可注入的东西:即服务。

服务会被叫做供应商的东西来定义,就是使用$provide来创建一个供应商。

你需要使用$provide中的provider()方法来定义一个供应商,同时你也可以通过$provide注入到一个应用的config函数中来获得$provide服务。

定义供应商的方法们

AngularJS$provide去定义一个供应商,这个$provide有5个可用创建方法:

  1. constant

    定义常量用,定义的值不能被改变,它可以被注入到任何地方,但是不能被装饰器decorator装饰

    var app = angular.module('app', []);
    // 方式一
    app.config(function ($provide) {
      $provide.constant('me', 'is constant');
    });
    // 方式二
    app.constant('me', 'is constant');
    
  2. value

    可以是string,number甚至function,它和constant的不同之处在于,它可以被修改,不能被注入到config中,但是它可以被decorator装饰.

    var app = angular.module('app', []);
    // 方式一
    app.config(function ($provide) {
      $provide.value('me', 'is value')
    });
    // 方式二
    app.value('me', 'is value');
    
  3. service

    一个可注入的构造器,在AngularJS中它是单例的,用它在Controller中通信或者共享数据都很合适

    var app = angular.module('app' ,[]);
    // 方式一 
    app.config(function ($provide) {
      $provide.service('me', function () {
        this.title = 'is me service';
      });
    });
    // 方式二
    app.service('me', function () {
      this.title = 'is me service';
    });
    
  4. factory

    一个可注入的function,它和service的区别就是:

    factory是普通function

    service是一个构造器constructor

    这样Angular在调用service时会用new关键字,而调用factory时只是调用普通的function,所以factory可以返回任何东西,而service可以不返回

    var app = angular.module('app', []);
    // 方式一 
    app.config(function ($provide) {
      $provide.factory('me', function () {
        return {
          title: 'is factory'
        }
      });
    });
    // 方式二
    app.factory('me', function () {
      return {
        title: 'is factory'
      }
    });
    
  5. provider

    var app = angular.module('app', []);
    // 创建
    app.provider('me', function () {
      var version;
      return {
        setVersion: function (value) {
          lev = value;
        },
        // 必须有 `$get`方法
        $get: function () {
          return {
              title: 'my love' + ' ' + lev
          }
        }
      }
    });
    // 配置阶段可调用 
    app.config(function (meProvider) {
      movieProvider.setVersion(1);
    });
    

    注意这里config方法注入的是meProvider

    上面定义了一个供应商叫me,但是注入到config中不能直接写me

    因为前文讲了注入的那个东西就是服务,是供应商提供出来的,

    config中又只能注入供应商(两个例外是$provide$injector),所以用驼峰命名法写成meProviderAngular就会帮你注入它的供应商。

  6. decorator该方法无法创建

    var app = angular.module('app', []);
    
    app.value('meTitle', 'code');
    
    app.config(function ($provide) {
      $provide.decorator('meTitle', function ($delegate) {
        return $delegate + '- decorator';
      });
    });
    

    这个比较特殊,它不是provider,它是用来装饰其他provider的,而前面也说过,他不能装饰Constant,因为实际上Constant不是通过provider()方法创建的。

总结

  • 所有的供应商都只被实例化一次,都是单例的
  • 除了constant,所有的供应商都可以被装饰器(decorator)装饰
  • value就是一个简单的可注入的值
  • service是一个可注入的构造器
  • factory是一个可注入的方法
  • decorator可以修改或封装其他的供应商,当然除了constant
  • provider是一个可配置的factory

快速功能对比:

功能/类型 Factory Service Value Constant Provider
可以有依赖 Yes Yes No No Yes
注入没有限制 No Yes Yes Yes No
可在配置阶段使用 No No No Yes Yes
可以创建函数 Yes Yes Yes Yes Yes
可以创建原始对象 Yes No Yes Yes Yes

参考文章

AngularJS中的Provider们:Service和Factory等的区别 - SegmentFault 思否

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章