angularjs - .config() 中带有自定义提供程序的未知提供程序

Question

我在 app.js 中有这个：

angular.module('App',[]).config(['TranslationProvider', function (TranslationProvider) {
//codes...
}]);    

这个服务在另一个文件中：

angular.module('App')

.provider('Translation', function() {
var translations = {foo:"bar"}

this.$get = function(){
    return translations;
};

});

服务 js 文件没有 404 错误，但是当角度注入器尝试实例化时，它给了我这个错误：

Uncaught Error: [$injector:modulerr] Failed to instantiate module App due to:
Error: [$injector:unpr] Unknown provider: TranslationProvider

我遵循了 angjs 文档https://docs.angularjs.org/guide/providers

Answer 1

这似乎是 Angular 1.2.x 中的一个错误。调用的顺序很重要。当你打电话provide之前config它工作。无论顺序如何，它也适用于 Angular 1.3.x。

Answer 2

你快到了。

首先是配置：

angular.module('App')
    .config(["TranslationProvider", function(theProvider) {
        console.log("in config" + theProvider)
        theProvider.setName("some name");
    }]);

您遇到的错误是由于您使用构造函数作为参数。

现在您的提供商：

angular.module('App')
    .provider('Translation', function TranslationProvider() {
        var translations = {foo:"bar", name:""};
        var dynamicName;

        this.setName = function(configName) {
            dynamicName = configName;
        };

        this.$get = function(){
            translations.name = dynamicName;
            return translations;
        };
    });

另请注意，也可以使用匿名函数（即 .provider('Translation', function () {），并且代码也可以正常工作。

在控制器中使用它：

angular.module('App')
   .controller('MyController', [
    '$scope',
    'Translation',

    function ($scope,
              translationProvider) {

        $scope.modal = {};
        $scope.projects = [];

        console.log(translationProvider)
        $scope.foo = translationProvider;
    }]);