Comment obtenir les valeurs de configuration du serveur dans Angular?

Question

Mon application a besoin de valeurs de configuration au démarrage de l'application. Suggestions de la communauté est de les stocker aussi constante que le module séparé, de préférence dans un fichier .js séparé. Cela pourrait fonctionner pour moi.
Cependant mes valeurs de configuration sont également stockées sur le serveur, et ne veulent pas dupliquer celles du côté client, donc je pensais à faire un appel de serveur pour les obtenir.
Im novice à angulaire, est-ce une pratique de conception valide pour faire appel du serveur dans la méthode de configuration du module? Si oui, devrais-je simplement utiliser le service $ http pour obtenir les valeurs du serveur?

var main = angular.module('myapp', ['AdalAngular']); 

    main.config(['$stateProvider',$httpProvider, adalAuthenticationServiceProvider', function ($stateProvider,$httpProvider,adalProvider) { 

     // $stateProvider configuration goes here 

     // ?????CAN I make server call here to get configuration values for adalProvider.init method below??? 

     adalProvider.init(
      { 
       instance: 'someurl', 
       tenant: 'tenantid', 
       clientId: 'clientid', 
       extraQueryParameter: 'someparameter', 
       cacheLocation: 'localStorage', 
      }, 
      $httpProvider 
      ); 

    }]); 

    main.run(["$rootScope", "$state", ..... 
     function ($rootScope, $state,.....) { 

      // application start logic 

     }]); 


    main.factory("API", ["$http", "$rootScope", function ($http, $rootScope) { 

     // API service that makes server call to get data 

    }]); 

EDIT1

Donc, en fonction des suggestions ci-dessous, je vais avec la déclaration approche constante. Fondamentalement, je vais avoir un fichier config.js séparé et pendant le processus de déploiement, je vais écraser le fichier config.js avec le fichier config.js basé sur l'environnement respectif.

Question
Si 10 ont des constantes alors je dois les transmettre séparément à module.config(). Est-il possible de déclarer la valeur constante en tant qu'objet JSON et en quelque sorte le lire dans la fonction de configuration, donc je n'ai pas passer 10 paramètres différents?

angular.module('myconfig', []) 
      .constant('CONFIGOBJECT','{Const1:somevalue,Const2:somevalue,Const3:somevalue,Const4:somevalue}'); 

puis comment lire les valeurs dans la méthode de configuration?

var main = angular.module('myapp',['myconfig']); 
main.config(['CONFIGOBJECT',function(CONFIGOBJECT){ 

?? How do I read CONFIGOBJECT value that is a string not json object? 

}) 

Answer 1

Vous ne pouvez pas injecter un service dans la section config.
Vous pouvez injecter un service dans la section run.

Donc, vous ne pouvez pas utiliser - par exemple $http service pour récupérer les données de serveur à l'intérieur config(), mais vous pouvez le faire à l'intérieur run(), qui initialise le service du fournisseur.

Voir aussi plus de réponses complètes here.

Espérons que cela aide.

MISE À JOUR:

Pourquoi string?Pourquoi ne pas utiliser simplement

.constant('CONFIGOBJECT', {Const1:somevalue,Const2:somevalue,Const3:somevalue,Const4:somevalue} 

pour

.constant('CONFIGOBJECT', '{Const1:somevalue,Const2:somevalue,Const3:somevalue,Const4:somevalue}' 

?

Answer 2

Seuls les fournisseurs sont disponibles pendant la phase de configuration, pas les services. Vous ne pouvez donc pas utiliser $ http pendant cette phase.

Mais vous pouvez l'utiliser pendant la phase d'exécution (dans une fonction passée à run()).

Une alternative consiste à avoir un fichier JavaScript généré dynamiquement par le serveur et à définir les constantes souhaitées.

Une autre alternative est de générer un tel fichier JS pendant la construction, basé sur un fichier qui serait lu par le code côté serveur.

Answer 3

Je vais décrire la solution utilisée dans le projet sur lequel je travaillais il y a quelque temps.

Il est vrai que vous ne pouvez pas services d'utilisation dans la phase config, et il est vrai aussi, que vous pouvez fournisseurs d'utilisation et constantes pendant la phase config. Nous avons donc utilisé la solution suivante: tout d'abord, nous avons créé simple objet avec config, comme

var config = { 
    someConfig1: true, 
    someConfig2: false, 
    someConfigEvents: { 
     event1: 'eventConfig1', 
     event2: 'eventConfig2' 
    } 
    etc... 
} 

Ensuite, nous déclarions également valeur angulaire avec jQuery lib:

app.value('jQuery', jQuery); 

Et maintenant, nous ne pouvons pas utiliser des services tels que $ http, mais nous pouvons utiliser jQuery, donc nous faisons simplement un appel ajax au serveur de configuration et étendons notre config:

jQuery.ajax("path/to/config", { async: false, cache: false }) 
    .done(function (data) { 
     var response = angular.fromJson(data) 
     if (response) { 
     angular.extend(config, response.returnData.data); 
     } else { 
     alert('error'); 
     } 
    }) 
    .fail(function() { 
     alertError(); 
    }) 
    .always(function() { 
     appInit(); 
    });