如何在angular中将依赖注入到module.config(configFn)中

Question

-在角度,我们可以注入$routeProvider到config功能

module.config(function ($routeProvider) {


});

我想把我的服务注入其中

module.config(function ($routeProvider, myService) {


});

我确信该服务已正确定义,但它会抛出一个异常unknown myService,说明当我注入时的事件

module.config(function ($routeProvider, $http) {


});

它仍然说unknown $http.

你知道为什么吗？

Answer 1

从模块页面,"模块加载和依赖关系"部分:

配置块 - 在提供程序注册和配置阶段执行.只有提供程序和常量才能注入配置块.这是为了防止在完全配置服务之前意外实例化服务.

运行块 - 在创建注入器后执行并用于启动应用程序.只有实例和常量才能注入运行块.这是为了防止在应用程序运行时进一步进行系统配置.

因此,您无法将自己的服务或内置服务(如$ http)注入config().请改用run().

Answer 2

我没有足够的声誉发表评论,但想补充马克的答案.

您可以自己注册提供商.它们基本上是带有$get方法的对象(或构造函数).注册提供程序时,可以像服务或工厂一样使用它的标准版本,但可以在之前使用提供程序版本.所以grumpy注册为的提供商

angular.module('...', [])
    .provider('grumpy', GrumpyProviderObject)

然后在配置函数中可用

    .config(['grumpyProvider', ..., function (grumpyProvider, ...) { ... }])

并且可以简单地注入控制器中

    .controller('myController', ['grumpy', ..., function (grumpy, ...) { ... }])

grumpy注入的对象myController只是在$get方法上运行方法的结果GrumpyProviderObject.请注意,您注册的提供程序也可以是常规JavaScript构造函数.

注意:根据@Problematic的注释,提供者初始化(angular.module().provider(…)必须在config函数可用之前调用.

Answer 3

你可以这样做:

(function() {
    'use strict';

    angular.module('name', name).config(config);
    // You can do this:
    config.$inject = ['$routeProvider', 'myService'];

    function config($routeProvider, myService) {
        // Or better to use this, but you need to use ng-annotate:
        /* ngInject */

    }
});

这是描述最佳实践这里

Answer 4

您可以手动调用angular.injector以访问在应用程序块期间没有依赖项的服务.config()。如果您创建的服务没有任何需要遍历的依赖项，那么您可能可以使用：

angular.module('myApp').config(function () {
    var myService = angular.injector(['ng']).get('myService');
});

这也适用于其他简单服务，例如$http：

angular.module('myApp').config(function () {
    var http = angular.injector(['ng']).get('$http');
});

注意：通常您不需要在配置阶段注入服务，最好的设计是创建一个允许配置的提供程序。文档说这个功能是在 3rd 方库需要访问已经运行的 Angular 应用程序的注入器的情况下公开的。