2014-09-23 1 views
10

Ich schreibe die Javascript, AngularJS App mit Typoskript. Auch ich benutze Grunzen zum Bauen. In der Tat habe ich mit ng boilerplate gestartet.Wie liest man die JSON-Konfigurationsdatei im Winkelmodul?

Nehmen wir nun an Ich habe eine config.json Datei so etwas wie unten-

{ 
    "app": "abc", 
    "login": "xyz" 
} 

Ich möchte einige Variablen in meiner Anwendung konfigurierbar sein. Also an einem Ort könnte ich so etwas wie verwenden -

var loginUrl : string = "def?pqr="+config.app; 

Nun, wie kann ich diese config in meinen Javascript-Dateien lesen? Ich suche nach einer Best-Practice-Antwort. Mir geht es gut mit Substitution unter grunt build Schritt auch.

Hinweis: Die Konfigurationsdatei ist auf dem Client selbst vorhanden, d. H., Sie muss nicht separat vom Server geladen werden.

Antwort

7

In meinem Fall verwende ich grunt eine Konfigurationsdatei (gemeinsam mit dem Server) in einem Winkelkonstante Modul zu injizieren:

grunt-preprocess Verwendung:

I mit einem config.tpl.js aufweisen:

angular.module('app.config', []) 

.constant('appConfig', { 

    // clientside specific constants 
    var1      : 'value1', 
    var2      : [1,2,3], 
    sharedVars     : /* @echo SHARED_VARS */ 
}); 

Dann in meinem gruntFile:

preprocess: { 
    options: { 
     context: { 
      SHARED_VARS: grunt.file.read('config.json'), 
     } 
    }, 
    config: { 
     src: 'src/config.tpl.js', 
     dest: 'src/config.js' // true file generated and loaded in index.html 
    } 
}, 

Tha So können Sie eine vollständige Konfigurationsdatei in ein eckiges Konstantenmodul einfügen oder nur die gewünschten Variablen auswählen.

+0

Ich brauchte keine sharedVars, also habe ich nur clientseitige spezifische Konstanten verwendet. Das bedeutet, ich musste nicht grunt-preprocess verwenden und installieren –

+1

Gut, diese Lösung funktioniert wie erwartet. Trotzdem habe ich einen Fehler mit 'sharedVars:/* @echo SHARED_VARS * /' bekommen. Es ist ziemlich offensichtlich, weil es ein Kommentar ist. Weißt du, ob es einen Weg gibt, die Entdeckung des Fehlers zu vermeiden? – C0ZEN

+0

@ C0ZEN die Datei, die das Echo enthält, ist nur eine Vorlagendatei, die Sie nicht verwenden sollen. Es ist die generierte Datei src/config.js, die Sie verwenden sollten. –

5

Für clientseitigen Code sollten Sie einfach $http.get verwenden, um die JSON-Datei vom Server zu erhalten. die JSON-Datei Unter der Annahme http zugänglich /manage/config.json Sie tun würden:

$http.get('/manage/config.json').then((res)=>{ 
    var config = res.data; 
}); 

http $ nicht automatisch json für Sie Parsen.

+1

Die Konfigurationsdatei auf dem Client vorhanden ist, selbst. Ich werde das in Frage stellen. –

3

hier ist, was ich tat

var initInjector = angular.injector(['ng']); 
    var $http = initInjector.get('$http'); 
    var configModule = angular.module('portalConfig', []); 
    $http.get('../config/Settings.json').then(
      function (response) { 

       configModule.value('config', response.data); 
      } 
     ); 

und dann nehme Ihre App-Modul ist foo dann

angular.module('foo',['portalConfig'])