como injetar dependência em module.config (configFn) em angular

Em Angular, podemos injetar $routeProvider para a function config

 module.config(function ($routeProvider) { }); 

Eu quero injetar meu serviço nele como

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

Tenho certeza que o serviço está definido corretamente, mas lança uma exceção dizendo que o unknown myService , evento quando injetar como

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

ainda diz unknown $http .

Você sabe por quê?

Na página Módulos , seção “Carregamento e Dependências do Módulo”:

Blocos de configuração – são executados durante os registros do fornecedor e na fase de configuração. Somente provedores e constantes podem ser injetados nos blocos de configuração. Isso é para impedir a instanciação acidental de serviços antes que eles tenham sido totalmente configurados.

Blocos de execução – são executados depois que o injetor é criado e são usados ​​para dar o kickstart no aplicativo. Apenas instâncias e constantes podem ser injetadas em blocos de execução. Isso evita a configuração adicional do sistema durante o tempo de execução do aplicativo.

Então você não pode injetar seu próprio serviço ou serviços embutidos como $ http em config (). Use run () em vez disso.

Não tenho reputação suficiente para postar um comentário, mas queria adicionar à resposta de Mark.

Você pode registrar os provedores por conta própria. Eles são basicamente objects (ou construtores) com um método $get . Quando você registra um provedor, a versão padrão dele pode ser usada como um serviço ou fábrica, mas uma versão do provedor pode ser usada antes. Portanto, um provedor grumpygrumpy registrado como

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

está então disponível na function config como

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

e pode ser injetado em controladores simplesmente como

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

O object grumpy que é injetado no myController é simplesmente o resultado da execução do método $get no GrumpyProviderObject . Observe que o provedor que você registra também pode ser um construtor JavaScript regular.

Nota: conforme o comentário de @Problematic, a boot do provedor (a chamada para angular.module().provider(…) deve vir antes que a function config esteja disponível.

Você pode fazer assim:

 (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 */ } }); 

É a melhor prática descrita aqui

Você pode chamar manualmente o angular.injector para obter access a serviços que não têm dependencies durante o bloco .config() do seu aplicativo. Se o serviço que você criou não tiver nenhuma dependência que precise ser percorrida, provavelmente você pode usar isto:

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

Isso funciona também para outros serviços simples, como $http :

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

Nota: Normalmente, você não precisa injetar serviços durante a fase de configuração. É melhor criar um provedor que permita a configuração. Os documentos dizem que essa funcionalidade está exposta para casos em que bibliotecas de terceiros precisam ter access ao injetor de um aplicativo Angular já em execução.

Se você quiser injetar dependência (digamos, de um Serviço) para chamar um formulário de function em rotas (.config), conforme mostrado abaixo templateProvider.getTemplate (‘about’)

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

Você deve criar um provedor. Não serviço nem fábrica.

Aqui está um exemplo real de um provedor que gera o caminho do modelo a partir do nome:

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

O uso de tal provedor nas rotas (.config) será o seguinte:

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

Nota VIP:

para injetar o provedor você deve postfix-lo com xxxProvider (esse nome do provedor não deve ser postfixed, apenas na injeção no .config).

Se isso pode facilitar as coisas para alguns de vocês.

Conforme explicado nesta resposta , você pode simplesmente append o Provider ao seu serviço personalizado e depois acessar as funções internas usando $get() .

Pode não ser a solução mais limpa, mas faz o trabalho.

 module.config(function ($routeProvider, myServiceProvider) { // Call a function hello() on myService. myServiceProvider.$get().hello(); }); 
 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: '/' }); }]); 

Você poderia tentar isso:

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