如何在 module.config (configFn)中以角度注入依赖关系

在角度函数中，我们可以将 $routeProvider注入到 config函数中

module.config(function ($routeProvider) {




});

我想把我的服务注入其中

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




});

我确信服务的定义是正确的，但它抛出一个异常，说 unknown myService，事件当我注入像

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




});

上面还写着 unknown $http。

你知道为什么吗？

90622 次浏览
小开
最佳答案

从 模组页，“模块加载和依赖”部分:

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

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

因此，您不能将自己的服务或内置服务(如 $http)注入 config ()。

小开

我没有足够的名声来发表评论，但是我想补充一下马克的回答。

您可以自己注册提供程序。它们基本上是具有 $get方法的对象(或构造函数)。注册提供程序时，可以像使用服务或工厂一样使用标准版本，但可以更早地使用提供程序版本。因此，注册为

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

然后在配置函数中作为

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

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

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

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

注意: 根据@problem 的注释，提供程序的初始化(对 angular.module().provider(…)的调用必须在配置函数可用之前进行。

小开

你可以试试这个:

module.config(['$routeProvider', '$http', function ($routeProvider, $http) {}]);
小开

你可以这样做:

(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 */


}
});

这是描述 给你的最佳实践

小开

如果您想要注入依赖项(比方说从服务)来调用路由中的函数表单(。如下面的 GetTemplate (‘ about’)所示

.state('index.about', {


    url: "/about",
    templateUrl: templateProvider.getTemplate('about'),
    controller: 'AboutCtrl',
    controllerAs: 'about',
    data: {pageTitle: 'About Us Page'}


})

您必须创建提供程序，而不是服务或工厂。

下面是一个实际的提供程序示例，它根据名称生成模板路径:

(function () {


    'use strict';
    angular


        .module('mega-app')


        .provider('template', provider);


      function provider(CONSTANT) {


        // The provider must include a $get() method This $get() method
        // will be invoked using $injector.invoke() and can therefore use
        // dependency-injection.
       this.$get = function () {


            return {}


        };
       /**
         * generates template path from it's name
         *
         * @param name
         * @returns {string}
         */
       this.getTemplate = function (name) {


            return CONSTANT.TEMPLATES_URL + name + '/' + name + '.html';
        }




        /**
         * generates component path from it's name
         * @param name
         * @returns {string}
         */
       this.getComponent = function (name) {


            return CONSTANT.COMPONENTS_URL + name + '.html';
        }


    };
})();

这种 Provider 在路由(. config)中的用法如下:

(function () {


    'use strict';
    angular


        .module('mega-app')


        .config(routes);
   function routes($stateProvider, $urlRouterProvider, templateProvider) {






       $stateProvider
            //----------------------------------------------------------------
            // First State
            //----------------------------------------------------------------
            .state('index', {


                abstract: true,
                url: "/index",
                templateUrl: templateProvider.getComponent('content'),
                controller: 'IndexCtrl',
                controllerAs: 'index',
            })


            //----------------------------------------------------------------
            // State
            //----------------------------------------------------------------
            .state('index.home', {


                url: "/home",
                templateUrl: templateProvider.getTemplate('home'),
                controller: 'HomeCtrl',
                controllerAs: 'home',
                data: {pageTitle: 'Home Page'}


            })


            //----------------------------------------------------------------
            // State
            //----------------------------------------------------------------
            .state('index.about', {


                url: "/about",
                templateUrl: templateProvider.getTemplate('about'),
                controller: 'AboutCtrl',
                controllerAs: 'about',
                data: {pageTitle: 'About Us Page'}


            })


        //----------------------------------------------------------------
        // Default State
        //----------------------------------------------------------------
       $urlRouterProvider.otherwise('/index/home');
    };
})();

贵宾须知:

要注入提供程序，必须使用 xxxProvider 对其进行后缀(提供程序的名称不应该后缀，只能在。配置)。

小开

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

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');
});

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

小开

如果这能让你们中的一些人好过点的话。

根据 在这个答案中解释，只需将 Provider附加到自定义服务，然后使用 $get()访问内部函数。

这可能不是最干净的解决方案，但它的工作。

module.config(function ($routeProvider, myServiceProvider) {
// Call a function hello() on myService.
myServiceProvider.$get().hello();
});

提交答案