《深入理解 AngularJs 之 $provider》

1. 什么是 `$provider`？

$provider 是 AngularJs 的提供的一种服务(service)，基于 $injector 模块将许多方法注册到组件、config 和 filter 中。

那什么是 AngularJs 的 service 呢？

AngularJs 的 service 是基于 service 工厂创建出来的单一对象，而 service 工厂均是由 service provider 创建的。service provider 是一个构造函数，当 service provider 被实例化的时候，一定会包含 $get 属性，这个属性就是 service factory 所要提供的所有方法的函数。

那 $provider 在调用时发生了什么？

当在 controller 或者是 component 中引用 $provider 的时候，$injector 会根据 name 找到正确的 $provider ，然后实例化它、调用 $get 并返回他的值，而这个值就是 service 的实例。

2. `$provider` 有哪些表现形式？

$provider 针对注入功能的不同提供了一些简写方法：

provider
factory
service
constant
value
decorator

本文的主要内容仅针对 service , factory 和 provider 这三种形式的 $provider。

3. 如何使用？

若要 $provider 生效，那么需要将其挂在到某一个 module 下：

var demo = angular.module('DemoModule');

本文将以 var demo 作为主要的演示模块。

3.1 `provider(name, constructor)`

注册一个 provider 的构造函数，通过实例化这个构造函数可以注入 factory 或 service。

可以理解为，factory 和 service 的 $provider 都是在 provider 方法基础上做的进一步封装。


// 声明名为 test4provider 的 provider
demo.provider('test4provider', function () {
    // 赋予 test4provider 构造函数一个成员方法 sayHello
    this.sayHello = function () {
        console.log('test4provider say hello');
    };

    // $get 方法赋值是必不可少的，这是该 provider 可注入到其他 controller 或 component 的先决条件
    this.$get = ['$scope', function ($scope) {
        return {
            sayHi: function () {
                console.log('test4provider\'s $get say hi!');
            }
        };
    }]
})

demo.config('demo.config', ['test4providerProvider', function (test4provider) {
    // { sayHello: function() {...}, $get: function() { ... } }
    console.log(test4provider);

    // test4provider say hello
    test4provider.sayHello();

    // test4provider's $get say hi!
    test4provider.$get().sayHi();

}])

demo.controller('demo.ctrl', ['test4provider', function(test4provider) {
    // Error: sayHello is not a function
    test4provider.sayHello();

    // 调用 test4provider 的服务项 sayHi
    test4provider.sayHi();
}])

3.2 `factory(name, $getFn)`


// 声明名为 test4factory 的 factory
demo.factory('test4factory', function () {
    return {
        sayHi: function () {
            console.log('test4factory\'s $get say hi!');
        }
    };
})

demo.config('demo.config', ['test4factoryProvider', function (test4factory) {
    // { $get: function() { ... } }
    console.log(test4factory);

    // Error: sayHello is not a function
    test4provider.sayHello();

    // test4factory $get say hi!
    test4factory.$get().sayHi();

}])

demo.controller('demo.ctrl', ['test4factory', function(test4factory) {
    // Error: sayHello is not a function
    test4factory.sayHello();

    // 调用 test4factory 的 sayHi
    test4factory.sayHi();
}])

3.3 `service(name, constructor)`

注册服务的构造函数。


var Say = function () {};

Say.$inject = ['$scope'];

Say.prototype.sayHi = function () {
    console.log('Say hi!');
};

// 声明名为 test4service 的 service
demo.service('test4service', Say);

demo.config('demo.config', ['test4serviceProvider', function (test4service) {
    // { $get: function() { ... } }
    console.log(test4service);

    // Error: sayHello is not a function
    test4service.sayHello();

    // 通过 new 关键字创建一个 test4service 的 $get 的实例，然后调用 sayHi 方法
    (new test4service.$get()).sayHi();  // say hi!
}])

demo.controller('demo.ctrl', ['test4service', function(test4service) {
    // Error: sayHello is not a function
    test4service.sayHello();

    // 调用 test4service 的原型方法 sayHi
    test4service.sayHi();
}])

4. 总结

OK，到这里你可能对 provider, factory 和 service 有了大致的了解，那么让我们来总结下：

1. 这三种方法都可以在 `config` 里注入服务，不过有些区别：

provider 的使用方式最灵活，既可以访问其构造函数内部的成员方法，也可以以调用的方式直接访问 $get 属性，当然也可以使用 new 关键字实例化 $get（前提是 $get 对应的是构造函数）;
factory 在 config 中只能访问其 $get 方法，并且仅能以函数调用的方式获取 $get 方法的返回值，其值为声明 factory 时的方法；
service 在 config 中也只能访问 $get 方法，但是必须要以 new 关键字来创建实例后访问其实例对象。

2. 这三种方法都可以在 `controller` 或 `component` 中注入服务：

三者的使用方式相同，没有区别；
需要注意的是 provider，无法在 controller 和 component 中访问构造函数的成员对象，只能访问调用 $get 方法后的返回值。

wangsiyuan0215 / blog