Question

在Angular中，我们可以将$routeProvider注入config函数

module.config(function ($routeProvider) {


});

我想将我的服务注入其中，如

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


});

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

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


});

它仍然说unknown $http。

你知道为什么吗？

Answer 1

从Modules页面“模块加载和依赖关系”部分：

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

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

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

Answer 2

我没有足够的声誉发表评论，但想加入马克的回答。

您可以自行注册提供商。它们基本上是具有$get方法的对象（或构造函数）。注册提供程序时，可以像服务或工厂一样使用它的标准版本，但可以在之前使用提供程序版本。所以注册为

的grumpy提供商

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

然后

在配置功能中可用

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

可以简单地注入控制器

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

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

注意：根据@Problematic的评论，提供程序初始化（对GrumpyProviderObject的调用必须在配置函数可用之前。

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

    }
});

最佳做法是here

Answer 4

如果你想注入依赖（让我们说服务）来调用路由（.config）中的函数表单，如下所示 templateProvider.getTemplate（＆＃39; about＆＃39;）

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

路由（.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'); }; })();

VIP注意：

注入提供者必须使用xxxProvider进行后缀（提供者的名称不应该后缀，只能在.config中注入）。

Answer 5

您可以在应用的.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应用程序的注入器的情况下公开的。

Answer 6

如果它可以让你们中的一些人更轻松。

根据explained in this answer，您只需将Provider附加到自定义服务，然后使用$get()访问内部函数。

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

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

Answer 7

angular.module('modulename').config(['$routeprovider','$controllerprovider',function($routeprovider,$controllerprovider){
angular.module('modulename').controllerProvider = $controllerProvider;
angular.module('modulename').routeprovider=$routeprovider;
$routeprovider.when('/',{
        templateUrl: 'urlname',
        controller: 'controllername',
        resolve:{
             'variable':variablenamewithvalue 
        }
 }).otherwise({
        redirectTo: '/'
      });

  }]);

Answer 8

你可以试试这个：

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

如何在angular中将依赖注入到module.config（configFn）中

8 个答案: