cómo inyectar la dependencia en module.config (configFn) en angular

En Angular, podemos inyectar $routeProvider a la función config

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

Quiero inyectar mi servicio en él como

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

Estoy seguro de que el servicio está definido correctamente, pero arroja una excepción diciendo que unknown myService , evento cuando lo inyecte como

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

todavía dice unknown $http .

¿Sabes por qué?

Desde la página Módulos , sección “Módulo de carga y dependencias”:

Bloques de configuración : se ejecutan durante los registros del proveedor y la fase de configuración. Solo proveedores y constantes se pueden inyectar en bloques de configuración. Esto es para evitar la instanciación accidental de servicios antes de que se hayan configurado completamente.

Ejecutar bloques : se ejecuta después de que se crea el inyector y se utilizan para reiniciar la aplicación. Solo las instancias y las constantes se pueden inyectar en los bloques de ejecución. Esto es para evitar una mayor configuración del sistema durante el tiempo de ejecución de la aplicación.

Por lo tanto, no puede inyectar su propio servicio o servicios integrados como $ http en config (). Use run () en su lugar.

No tengo suficiente reputación para publicar un comentario, pero quería agregar a la respuesta de Mark.

Puede registrar proveedores usted mismo. Básicamente son objetos (o constructores) con un método $get . Cuando registra un proveedor, la versión estándar puede usarse como un servicio o una fábrica, pero una versión del proveedor puede usarse antes. Entonces, un proveedor grumpy que está registrado como

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

está entonces disponible en la función de configuración como

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

y se puede inyectar en controladores simplemente como

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

El objeto grumpy que se inyecta en myController es simplemente el resultado de ejecutar el método $get en GrumpyProviderObject . Tenga en cuenta que el proveedor que usted registre también puede ser un constructor de JavaScript normal.

Nota: según el comentario de @Problematic, que la inicialización del proveedor (la llamada a angular.module().provider(…) debe venir antes de que la función de configuración esté disponible.

Puedes hacerlo así:

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

Es la mejor práctica que se describe aquí

Puede llamar manualmente a angular.injector para obtener acceso a servicios que no tienen dependencias durante el bloque .config() de su aplicación. Si el servicio que creó no tiene ninguna dependencia que deba atravesarse, entonces probablemente pueda usar esto:

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

Esto funciona para otros servicios simples como $http también:

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

Nota: Por lo general, no debería necesitar inyectar servicios durante su fase de configuración; es mejor diseñar un proveedor que permita la configuración. Los documentos dicen que esta funcionalidad está expuesta para casos en que las bibliotecas de terceros necesiten acceder al inyector de una aplicación Angular ya en funcionamiento.

Si desea inyectar una dependencia (digamos desde un Servicio) para llamar a un formulario de función en las rutas (.config) como se muestra a continuación templateProvider.getTemplate (‘about’)

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

Debe crear un proveedor. No servicio ni fábrica

Aquí hay un ejemplo real de un proveedor que genera la ruta de la plantilla desde el nombre:

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

El uso de dicho proveedor en las rutas (.config) será el siguiente:

 (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 inyectar al proveedor debes postfixarlo con xxxProvider (ese nombre del proveedor no debe ser postfijo, solo al inyectarlo en .config).

Si puede hacer las cosas más fáciles para algunos de ustedes.

Según lo explicado en esta respuesta , puede agregar Provider a su servicio personalizado y luego acceder a las funciones internas usando $get() .

Puede que no sea la solución más limpia, pero cumple su función.

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

Puedes intentar esto:

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