web-dev-qa-db-fra.com

Injecter une constante dans la configuration d'autres modules en utilisant Angular JS

Je voudrais partager certaines variables comme les chemins de base tout au long de mon application. Ces variables doivent être accessibles lors de la configuration du module. Mon opinion était que je peux utiliser une constante ou un fournisseur pour cela.

J'ai plusieurs modules et chacun a sa propre configuration de routage. Dans ces configurations de routage, je souhaite accéder à certains paramètres par exemple.

Cela fonctionne pour la configuration du module d'application, mais pas pour les autres configurations de module (pour les contrôleurs sur d'autres modules, c'est le cas), je reçois toujours "Fournisseur inconnu: informations de myApp.orders".

var myApp = angular.module('myApp', ['myApp.orders']);

myApp.constant('info', {
  version : '1.0'
});

myApp.config(function(info) {
  console.log('app config: ' + info.version);
});

myApp.controller('MyController', function (info) {
  console.log('controller: ' + info.version);
});

var orders = angular.module('myApp.orders', []);

// Remove comments to see it fail.

//orders.config(function(info) {
//  console.log('orders config: ' + info.version);
//});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

  <div ng-app="myApp" class="container" ng-controller="MyController">        
  </div>

Je suppose que je viens de rater un petit détail, avez-vous une idée?

javascriptangularjsdependency-injectionconstantsprovider
36
martinoss

Votre constante info est définie dans votre module myApp. Si je comprends bien votre question, vous souhaitez utiliser les constantes dans d'autres modules (par exemple le module myApp.orders). Si c'est le cas, vous devez injecter myApp dans myApp.orders, mais il semble que vous souhaitiez faire l'inverse. Une solution consiste à découpler les constantes dans un module autonome et à l'injecter en tant que dépendance si nécessaire.

angular.module('constants', []) 
  .constant(...);

angular.module('myApp', ['constants', 'myApp.orders'])
  ...

angular.module('myApp.orders', ['constants'])
  ...
51
ikumen

Je ne sais pas si ma solution est la plus jolie, mais j'ai mis dans mon index.html une définition d'une CONFIG à laquelle je fais référence à partir d'autres composants. Je génère mon index.html avec du code côté serveur afin de pouvoir définir les valeurs au démarrage du programme. Autrement dit, j'utilise index.cshtml mais il peut tout aussi bien être index.php ou une autre technologie. Voici à quoi ressemble mon index.html:

....

 <script type="text/javascript">
    var usingMockDataGlobal = true;
 </script>

....


<script type="text/javascript">

        (function () {
            'use strict';

            var configData = {


                codeCampType: 'angu',

                loggedInUsername: 'peter',
                mockData: usingMockDataGlobal
            };
            angular.module('baseApp').constant('CONFIG', configData);


        })();
    </script>
3
Peter Kellner