Wie verwalten Sie Konfigurationsvariablen / -konstanten für verschiedene Umgebungen?
Dies könnte ein Beispiel sein:
Meine Rest-API ist auf erreichbar localhost:7080/myapi/
, aber mein Freund, der unter Git-Versionskontrolle mit demselben Code arbeitet, hat die API auf seinem Tomcat bereitgestellt localhost:8099/hisapi/
.
Angenommen, wir haben so etwas:
angular
.module('app', ['ngResource'])
.constant('API_END_POINT','<local_end_point>')
.factory('User', function($resource, API_END_POINT) {
return $resource(API_END_POINT + 'user');
});
Wie füge ich je nach Umgebung dynamisch den korrekten Wert des API-Endpunkts ein?
In PHP mache ich solche config.username.xml
Dinge normalerweise mit einer Datei, indem ich die Basiskonfigurationsdatei (config.xml) mit der lokalen Umgebungskonfigurationsdatei zusammenführe, die anhand des Namens des Benutzers erkannt wird. Aber ich weiß nicht, wie ich so etwas in JavaScript verwalten soll?
quelle
'ngconstant:development'
in'serve'
- wenn Sie es in config Uhr setzen unter'gruntfile'
sotasks: ['ngconstant:development']
- Sie Neustart nicht benötigt ,grunt serve
wenn Sie die Entwicklung Variablen im gruntfile aktualisieren.package: grunt.file.readJSON('development.json')
Eine coole Lösung könnte darin bestehen, alle umgebungsspezifischen Werte in ein separates Winkelmodul zu unterteilen, von dem alle anderen Module abhängen:
Dann können Ihre Module, die diese Einträge benötigen, eine Abhängigkeit davon deklarieren:
Jetzt könnten Sie über weitere coole Sachen nachdenken:
Das Modul, das die Konfiguration enthält, kann in configuration.js unterteilt werden, die auf Ihrer Seite enthalten sein werden.
Dieses Skript kann von jedem von Ihnen einfach bearbeitet werden, solange Sie diese separate Datei nicht in git einchecken. Es ist jedoch einfacher, die Konfiguration nicht einzuchecken, wenn sie sich in einer separaten Datei befindet. Sie können es auch lokal verzweigen.
Wenn Sie nun ein Build-System wie ANT oder Maven haben, können Ihre weiteren Schritte darin bestehen, einige Platzhalter für die Werte API_END_POINT zu implementieren, die während der Build-Zeit durch Ihre spezifischen Werte ersetzt werden.
Oder Sie haben Ihr
configuration_a.js
undconfiguration_b.js
und entscheiden im Backend, welches Sie einbeziehen möchten.quelle
Für Gulp- Benutzer ist die gulp-ng-Konstante auch in Kombination mit gulp-concat , event-stream und yargs nützlich .
In meinem Konfigurationsordner habe ich folgende Dateien:
Dann können Sie laufen
gulp config --env development
und das schafft so etwas:Ich habe auch diese Spezifikation:
quelle
Um dies zu erreichen, empfehle ich Ihnen, das AngularJS Environment Plugin zu verwenden: https://www.npmjs.com/package/angular-environment
Hier ist ein Beispiel:
Und dann können Sie die Variablen von Ihren Controllern wie folgt aufrufen:
Ich hoffe es hilft.
quelle
angular-environment
die Umgebung? dh was müssen Sie auf Ihrem lokalen Computer / Webserver tun, damit dieser weiß, dass es sich um dev / prod handelt?envServiceProvider.check()
... wird automatisch die entsprechende Umgebung basierend auf bestimmten Domänen festgelegt". Ich gehe davon aus, dass es die aktuelle Domain erkennt und die Umgebung entsprechend einstellt - Zeit, sie zu testen!Sie können verwenden,
lvh.me:9000
um auf Ihre AngularJS-App zuzugreifen (zeigtlvh.me
nur auf 127.0.0.1) und dann einen anderen Endpunkt anzugeben, wennlvh.me
es sich um den Host handelt:Fügen Sie dann den Konfigurationsdienst ein und verwenden
Configuration.API
Sie ihn überall dort, wo Sie auf die API zugreifen müssen:Ein bisschen klobig, funktioniert aber gut für mich, wenn auch in einer etwas anderen Situation (API-Endpunkte unterscheiden sich in Produktion und Entwicklung).
quelle
window.location.host
war für mich mehr als ausreichend.Wir könnten auch so etwas machen.
Und in Ihrem
controller/service
können wir die Abhängigkeit einfügen und die get-Methode mit der Eigenschaft aufrufen, auf die zugegriffen werden soll.$http.get(env.get('apiroot')
würde die URL basierend auf der Host-Umgebung zurückgeben.quelle
Gute Frage!
Eine Lösung könnte darin bestehen, die Datei config.xml weiterhin zu verwenden und API-Endpunktinformationen aus dem Backend für Ihr generiertes HTML bereitzustellen, wie folgt (Beispiel in PHP):
Vielleicht keine schöne Lösung, aber es würde funktionieren.
Eine andere Lösung könnte darin bestehen, den
API_END_POINT
konstanten Wert so zu halten , wie er in der Produktion sein sollte, und nur Ihre Hosts-Datei so zu ändern, dass diese URL stattdessen auf Ihre lokale API verweist.Oder vielleicht eine Lösung
localStorage
für Overrides wie diese:quelle
Sehr spät zum Thread, aber eine Technik, die ich vor Angular verwendet habe, besteht darin, JSON und die Flexibilität von JS zu nutzen, um Sammlungsschlüssel dynamisch zu referenzieren und unveräußerliche Fakten der Umgebung (Hostservername, aktuelle Browsersprache) zu verwenden usw.) als Eingaben zur selektiven Unterscheidung / Bevorzugung von Schlüsselnamen mit Suffix innerhalb einer JSON-Datenstruktur.
Dies bietet nicht nur einen Bereitstellungsumgebungskontext (pro OP), sondern einen beliebigen Kontext (z. B. Sprache), um i18n oder eine andere Varianz bereitzustellen, die gleichzeitig und (idealerweise) innerhalb eines einzelnen Konfigurationsmanifests ohne Duplizierung und lesbar offensichtlich ist.
IN ÜBER 10 LINIEN VANILLA JS
Übermäßig vereinfachtes, aber klassisches Beispiel: Eine API-Endpunkt-Basis-URL in einer JSON-formatierten Eigenschaftendatei, die je nach Umgebung variiert, wobei (Host) der Host-Server ebenfalls variiert:
Ein Schlüssel zur Unterscheidungsfunktion ist einfach der Server-Hostname in der Anforderung.
Dies kann natürlich mit einem zusätzlichen Schlüssel kombiniert werden, der auf den Spracheinstellungen des Benutzers basiert:
Der Umfang der Unterscheidung / Präferenz kann auf einzelne Schlüssel (wie oben) beschränkt werden, wobei der "Basis" -Schlüssel nur überschrieben wird, wenn ein passender Schlüssel + Suffix für die Eingaben in die Funktion vorhanden ist - oder eine gesamte Struktur und diese Struktur selbst rekursiv analysiert für übereinstimmende Diskriminierungs- / Präferenzsuffixe:
Wenn also ein besuchender Benutzer der Produktionswebsite die Einstellung für die deutsche ( De- ) Sprache hat, wird die obige Konfiguration wie folgt zusammengefasst:
Wie sieht eine solche magische Präferenz- / Diskriminierungs-JSON-Umschreibungsfunktion aus? Nicht viel:
In unseren Implementierungen, die Angular- und Pre-Angular-Websites enthalten, booten wir die Konfiguration einfach weit vor anderen Ressourcenaufrufen, indem wir den JSON in einen selbstausführenden JS-Abschluss einfügen, einschließlich der Funktion prepare (), und grundlegende Eigenschaften von Hostname und einspeisen Sprachcode (und akzeptiert alle zusätzlichen beliebigen Suffixe, die Sie möglicherweise benötigen):
Eine Pre-Angular-Site hätte jetzt ein reduziertes Fenster (keine @ Suffix-Schlüssel) window.app_props , auf das verwiesen werden kann .
Eine Angular-Site kopiert als Bootstrap / Init-Schritt einfach das Dead-Drop-Requisitenobjekt in $ rootScope und zerstört es (optional) aus dem globalen Bereich / Fensterbereich
anschließend in Steuerungen einzuspritzen:
oder von Bindungen in Ansichten verwiesen:
Vorsichtsmaßnahmen? Das @ -Zeichen ist keine gültige JS / JSON-Variablen- / Schlüsselbenennung, wird jedoch bisher akzeptiert. Wenn dies ein Deal-Breaker ist, ersetzen Sie jede Konvention, die Sie mögen, wie "__" (doppelter Unterstrich), solange Sie sich daran halten.
Die Technik kann serverseitig angewendet, auf Java oder C # portiert werden, aber Ihre Effizienz / Kompaktheit kann variieren.
Alternativ könnte die Funktion / Konvention Teil Ihres Front-End-Kompilierungsskripts sein, sodass der vollständige JSON für alle Umgebungen und alle Sprachen niemals über das Netzwerk übertragen wird.
AKTUALISIEREN
Wir haben die Verwendung dieser Technik weiterentwickelt, um mehrere Suffixe für einen Schlüssel zuzulassen, um nicht gezwungen zu werden, Sammlungen zu verwenden (Sie können dies immer noch tun, so tief Sie möchten) und um die Reihenfolge der bevorzugten Suffixe einzuhalten.
Beispiel (siehe auch jsFiddle ):
1/2 (Grundverwendung) bevorzugt '@dev'-Schlüssel, verwirft alle anderen Suffix-Schlüssel
3 bevorzugt '@dev' gegenüber '@fr', bevorzugt '@ dev & fr' gegenüber allen anderen
4 (wie 3, bevorzugt jedoch '@fr' gegenüber '@dev')
5 keine bevorzugten Suffixe, löscht ALLE Suffixeigenschaften
Dies wird erreicht, indem jede Eigenschaft mit Suffix bewertet wird und der Wert einer Eigenschaft mit Suffix auf die Eigenschaft ohne Suffix angehoben wird, wenn über die Eigenschaften iteriert wird und ein höher bewertetes Suffix gefunden wird.
Einige Effizienzvorteile in dieser Version, einschließlich der Beseitigung der Abhängigkeit von JSON für das Deep-Copy und der rekursiven Wiederkehr in Objekte, die die Bewertungsrunde in ihrer Tiefe überstehen:
quelle
Wenn Sie Brunch verwenden , hilft Ihnen das Plugin Constangular beim Verwalten von Variablen für verschiedene Umgebungen.
quelle
Haben Sie diese Frage und ihre Antwort gesehen?
Sie können einen global gültigen Wert für Ihre App wie folgt festlegen:
und verwenden Sie es dann in Ihren Diensten. Sie können diesen Code in eine config.js-Datei verschieben und beim Laden der Seite oder in einem anderen geeigneten Moment ausführen.
quelle