AngularJS：在.config函数中注入提供者

Question

我未能在 .config 函数中注入一个名为 UserAgent 的 AngularJS 提供程序，但出现此错误：

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

这是我的配置：

angular
    .module('app')
    .config(Config);

Config.$inject = ['$routeProvider', 'UserAgent'];

function Config($routeProvider, UserAgent) {
    /*** code here ***/

}

这是我的提供者：

angular
    .module('app')
    .provider('UserAgent', UserAgent);

    function UserAgent() {
        return {
            $get: function () {
                return {
                    title: "Testing..."
                };
            }
        };
    }

Answer 1

将以下行中的 'UserAgent' 更改为 'UserAgentProvider'....

Config.$inject = ['$routeProvider', 'UserAgent'];

Config.$inject = ['$routeProvider', 'UserAgentProvider'];

这就是 Angular 期望应用程序公开的提供程序在依赖应用程序中被引用的方式：<ActualProviderName>Provider，在提供程序的实际名称后附加单词“Provider”。

Answer 2

很抱歉解决了这个问题，但我在同样的问题上苦苦挣扎，幸运的是找到了解决方案。我不是 Angular 专家，所以我的解决方案可能会做得更好，但希望这对那里的人有所帮助。

查看 AngularJS 的 providers 文档，他们的示例说明：

myApp.provider('unicornLauncher', function UnicornLauncherProvider() {});

然后他们展示了如何将该提供程序注入到配置函数中：

myApp.config(["unicornLauncherProvider", function(unicornLauncherProvider) {});

需要注意的重要一点是命名约定：提供者名称在声明时没有“提供者”一词，但配置注入却有。

和你一样，我也在为我的配置使用命名函数。所以我的配置注入声明看起来像：

angular.module('sample').config(['UserAgentProvider', config]);

但是，使用.$inject 注入器的做法略有不同。所以你的最终解决方案看起来像：

angular.module('sample').config(config);
config.$inject = ['UserAgentProvider'];

我也在使用 .$inject 注入器，但由于这个原因切换到了 AngularJS 文档样式语法：

请注意，独角兽提供者被注入到配置函数中。这种注入是由提供者注入器完成的，它与常规实例注入器不同，因为它只实例化和连接（注入）所有提供者实例。

不确定.config(['MyNamedProvider', NamedConfigFunction]) 是否比NamedConfigFunction.$inject = ['MyNamedProvider']; 更好

但重要的一点是在声明提供者期间省略“提供者”，但在注入所述提供者期间将其添加回来

Answer 3

您不得在配置阶段使用服务。配置阶段用于配置服务的提供者。完成后，将调用提供者来创建服务。