源码分析Angularjs中的Provider们的小小区别

查看更多文章: https://alili.tech

AngularJS的provider

Angular中有以下创建供应商(provider)的方法:

• provider()
• service()
• factory()

Provider使用方式

angular.module("app", [])
.provider("HelloAngular", function() {
    return {
        $get: function() {
            var name = "小明";
            function getName() {
                return name;
            }
            return {
                getName: getName
            }
        }
    }
})
.controller('MyCtrl', ['$scope', 'HelloAngular',
    function($scope, helloAngular) {
        $scope.gameName = helloAngular.getName();
    }
]);

Service使用方式

angular.module("app", [])
.service("HelloAngular", function() {
    this.name = "小明";
    this.getName=function(){
        return this.name;
    }
})
.controller('MyCtrl', ['$scope', 'HelloAngular',
    function($scope, helloAngular) {
        $scope.gameName = helloAngular.getName();
    }
]);

Factory使用方式

angular.module("app", [])
.factory("HelloAngular", function() {
    var name = "小明";
    function getName(){
        return name;
    }
    return {
    	getName:getName
    };
})
.controller('MyCtrl', ['$scope', 'HelloAngular',
    function($scope, helloAngular) {
        $scope.gameName = helloAngular.getName();
    }
]);

实现方法各有区别,但是使用上都是一模一样的

angularJs源码分析

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_;
}

//最终还是返回一个provider
function factory(name, factoryFn) { return provider(name, { $get: factoryFn }); }

//先变成factory,但是factory最终还是返回一个provider
function service(name, constructor) {
    return factory(name, ['$injector', function($injector) {
        return $injector.instantiate(constructor);
    }]);
}

都是围绕provider做着小小的修改,而实现了各种方式的供应商.

---

公众号“ Alili丶前端大爆炸”，关注后提供海量学习资料