comment injecter une dépendance dans module.config (configFn) dans angular

Dans Angular, nous pouvons injecter $routeProvider dans la fonction config

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

Je veux y injecter mon service comme

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

Je suis sûr que le service est défini correctement, mais il jette une exception en disant que unknown myService , événement lorsque unknown myService comme

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

il dit toujours unknown $http .

Est-ce que tu sais pourquoi?

Depuis la page Modules , section “Chargement du module et dépendances”:

Blocs de configuration – exécutés lors des phases d’enregistrement et de configuration du fournisseur. Seuls les fournisseurs et les constantes peuvent être injectés dans les blocs de configuration. Cela permet d’éviter une instanciation accidentelle de services avant qu’ils ne soient entièrement configurés.

Exécuter des blocs – s’exécute après la création de l’injecteur et permet de lancer l’application. Seules les instances et les constantes peuvent être injectées dans les blocs d’exécution. Cela permet d’éviter toute configuration supplémentaire du système pendant l’exécution de l’application.

Vous ne pouvez donc pas injecter votre propre service ou des services intégrés comme $ http dans config (). Utilisez plutôt run () .

Je n’ai pas assez de réputation pour poster un commentaire, mais je voulais append à la réponse de Mark.

Vous pouvez enregistrer les fournisseurs vous-même. Ce sont essentiellement des objects (ou des constructeurs) avec une méthode $get . Lorsque vous enregistrez un fournisseur, sa version standard peut être utilisée comme un service ou une usine, mais une version de fournisseur peut être utilisée plus tôt. Donc, un fournisseur grumpy qui est enregistré comme

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

est alors disponible dans la fonction de configuration en tant que

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

et peut être injecté dans les contrôleurs simplement comme

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

L’object grumpy qui est injecté dans myController est simplement le résultat de l’exécution de la méthode $get sur GrumpyProviderObject . Notez que le fournisseur que vous enregistrez peut également être un constructeur JavaScript normal.

Remarque: selon le commentaire de @Problematic, l’initialisation du fournisseur (l’appel à angular.module().provider(…) doit être disponible avant la fonction de configuration.

Vous pouvez le faire comme ceci:

 (function() { 'use ssortingct'; 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 */ } }); 

C’est la meilleure pratique décrite ici

Vous pouvez appeler manuellement angular.injector pour accéder aux services qui ne sont pas dépendants pendant le bloc .config() de votre application. Si le service que vous avez créé ne comporte aucune dépendance à traverser, vous pouvez probablement utiliser ceci:

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

Cela fonctionne pour d’autres services simples comme $http aussi:

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

Note: En général, vous ne devriez pas avoir besoin d’injecter des services pendant votre phase de configuration, il est préférable de créer un fournisseur permettant la configuration. Les documents indiquent que cette fonctionnalité est exposée dans les cas où des bibliothèques tierces doivent avoir access à l’injecteur d’une application Angular déjà en cours d’exécution.

Si vous souhaitez injecter une dépendance (disons à partir d’un service) pour appeler un formulaire de fonction dans les itinéraires (.config) comme indiqué ci-dessous templateProvider.getTemplate (‘about’)

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

Vous devez créer un fournisseur. Pas de service ni d’usine.

Voici un exemple réel de fournisseur qui génère le chemin du modèle à partir du nom:

 (function () {  'use ssortingct';  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 {ssortingng}     */    this.getTemplate = function (name) {      return CONSTANT.TEMPLATES_URL + name + '/' + name + '.html';    }    /**     * generates component path from it's name     * @param name     * @returns {ssortingng}     */    this.getComponent = function (name) {      return CONSTANT.COMPONENTS_URL + name + '.html';    }  }; })(); 

L’utilisation d’un tel fournisseur dans les itinéraires (.config) sera la suivante:

 (function () {  'use ssortingct';  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');  }; })(); 

Note VIP:

pour injecter le fournisseur, vous devez le postfixer avec xxxProvider (ce nom du fournisseur ne doit pas être postfixé, uniquement lors de l’injection dans le fichier .config).

Si cela peut faciliter les choses pour certains d’entre vous.

Par explication dans cette réponse , vous pouvez simplement append le Provider à votre service personnalisé, puis accéder aux fonctions internes en utilisant $get() .

Ce n’est peut-être pas la solution la plus propre, mais elle fait le travail.

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

Vous pourriez essayer ceci:

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