Angular 2 - So verwenden Sie Konfigurationsdateien

Question

Wenn Sie in ZF2 arbeiten, verwenden wir Konfigurationsdateien, die von Entwickler zu Entwickler und zwischen Produktions- und Staging-Umgebungen variieren können. Es ist ziemlich praktisch und als solche möchte ich dies für Angular 2 replizieren.

Wie es in ZF2 funktioniert: Wir haben einen Konfigurationsordner mit Konfigurationen namens: settings.local.php und settings.global.php. Wir verwenden dann eine Gitignore-Datei, um alles mit lokalen darin zu ignorieren.

Ich möchte etwas ähnliches mit Angular 2 tun und bin nicht 100% sicher, die beste Methode, um darüber zu gehen.

Für Angular 2 Ich dachte an eine Config-Ordner mit und dann einen Dienst mit Hilfe der Konfigurationsdateien greifen ...

Gibt es eine Konvention für so etwas wie dies in Angular 2?

Answer 1

Ich komme auch aus einem ZF2-Hintergrund und wollte diese Art von Funktionalität. Ich kann nicht versprechen, dass dies die "Konvention" ist, um dies zu erreichen, aber es funktioniert perfekt für mich und meine Situation.

Kurz gesagt verwende ich eine Kombination von JSON-Konfigurationsdateien und grunt-ng-constant (erfordert Grunt obvs ..)

Meine ngconstant config in meinem Gruntfile.js wie folgt aussieht:

ngconstant: { 
    options: { 
     constants: { 
      config: grunt.file.readJSON('config/config.global.json') 
     }, 
     name: 'constants', 
     dest: 'public/js/src/config.js', 
     wrap: '/* global angular */\n\n(function()\n{\n\t\'use strict\';\n\t\n\t{%= __ngModule %}\n\t\n})();\n' 
    }, 
    dev: { 
     constants: { 
      config: grunt.file.readJSON('config/config.dev.json') 
     } 
    }, 
    live: { 
     constants: { 
      config: grunt.file.readJSON('config/config.live.json') 
     } 
    } 
} 

Die Lage aller Ihrer Dateien liegt bei Ihnen .. aber die Theorie davon ist, dass config.global.json ist, wo alle Ihre Standardkonfigurationen gehen. Abhängig davon, ob Sie ngconstant:live oder ngconstant:dev ausführen, wird die entsprechende Konfiguration mit global zusammengeführt und Überlappungen überschrieben.

Dies speichert die Konfiguration zu einem neuen Winkel constant, public/js/src/config.js, die ich dann in jeden Service/Controller injizieren kann, die ich will.

/** 
* My Controller 
*/ 
angular 
    .module('ctrls') 
    .controller('myCtrl', myCtrl); 

/** 
* @param $scope 
* @param config 
*/ 
function myCtrl($scope, config) 
{ 
    $scope.someConfig = config.someConfigValue; 
}