angularJS依賴注入（二）服務對比

provider可以為應用提供通用的服務，形式可以是常量，也可以是對象。

比如我們在controller裡常用的$http就是AngularJS架構提供的provider～

myApp.controller(‘MainController', function($scope, $http) {

   $http.get(…)

}
           

provider

那我們自己想定制一個provider，怎麼寫呢～

//定義:
$provide.provider('age', {

    start: ,

    $get: function() {

        return this.start + ;

    }

});

//或

$provide.provider('age', function($filterProvider){

    this.start = ;

    this.$get = function() {

        return this.start + ;

    };
});

//調用:

app.controller('MainCtrl', function($scope, age) {

    $scope.age = age; //12

});
           

provider的基本原則就是通過實作

$get

方法來在應用中注入單例，使用的時候拿到的

age

就是

$get

執行後的結果。 上面例子中的兩種定義方法都可以～

factory

大哥provider每次出場太繁瑣了，如果我就想定義個$get，沒别的亂七八糟的呢？這時候該二哥factory出場了～

$provide.provider('myDate', {
    $get: function() {
        return new Date();
    }
});
//可以寫成
$provide.factory('myDate', function(){
    return new Date();
});
//調用:
app.controller('MainCtrl', function($scope, myDate) {
    $scope.myDate = myDate; //current date
});
           

直接第二個參數就是 get要對應的函數實作，代碼簡單了很多有沒有？！service這時候我又來勁兒了，我不僅就想定義個 get，裡面我還就傳回個new出來的已有js類，三哥service閃亮登場～

$provide.provider('myDate', {
    $get: function() {

        return new Date();

    }

});

//可以寫成

$provide.factory('myDate', function(){

    return new Date();

});

//可以寫成

$provide.service('myDate', Date);
           

對于這種需求，代碼更簡潔了是不是～～

value vs. constant

更直接的需求來了，我隻想定義個$get，而且就傳回個常量～

這時候value和constant都可以做到～

$provide.value('pageCount', );

$provide.constant('pageCount', );
           

兄弟倆功能一樣？雙胞胎？那怎麼可能～

介紹差別前，先得把之前坐小闆凳等着的decorator叫出來～終于該出場了～

差別一：value可以被修改，constant一旦聲明無法被修改

$provide.decorator('pageCount', function($delegate) {

    return $delegate + ;

});
           

decorator可以用來修改（修飾）已定義的provider們，除了constant～

差別二：value不可在config裡注入，constant可以

myApp.config(function(pageCount){

    //可以得到constant定義的'pageCount'

});
           

關于config，之後會專門介紹～

通過底層實作代碼看關系～

view sourceprint?

function provider(name, provider_) {

    if (isFunction(provider_)) {

        provider_ = providerInjector.instantiate(provider_);

    }

    if (!provider_.$get) {

        throw Error('Provider ' + name + ' must define $get factory method.');

    }

    return providerCache[name + providerSuffix] = provider_;

}

 function factory(name, factoryFn) { return provider(name, { $get: factoryFn }); }

 function service(name, constructor) {

    return factory(name, ['$injector', function($injector) {

        return $injector.instantiate(constructor);

    }]);

}

 function value(name, value) { return factory(name, valueFn(value)); }

 function constant(name, value) {

    providerCache[name] = value;

    instanceCache[name] = value;

}

 function decorator(serviceName, decorFn) {

    var origProvider = providerInjector.get(serviceName + providerSuffix),

    orig$get = origProvider.$get;

    origProvider.$get = function() {

        var origInstance = instanceInjector.invoke(orig$get, origProvider);

        return instanceInjector.invoke(decorFn, null, {$delegate: origInstance});

    };

}
           

從上面的代碼可以看出之前介紹的每種provider的特點，decorator比較特殊，不算，除了constant，另外幾個最終調用的都是provider～