Verwenden von verschiedenen Domäne für die Entwicklung und Produktion in angularjs

Question

Ich arbeite an AngularJS einzelne Seite Anwendung, die REST-Dienste konsumieren. Die Front-End-Anwendung wird separat vom Backend entwickelt und daher müssen wir während der Entwicklung den Domainnamen in den URLs für AJAX-Aufrufe fest codieren (wir haben CORS aktiviert). Aber im Fall der Produktion läuft alles in der gleichen Domäne und daher sieht der Domain-Name hardcoding wenig schlecht aus. Können wir den Domain-Namen in URLs für Ajax-Aufrufe während der Entwicklung verwenden und in der Produktion den Domain-Namen nicht fest codieren? Ich benutze Schluck.

Answer 1

ein Beispiel für die Verwendung gulp-ng-constant mit einem $httpinterceptor:

gulp.task('app.ngconstant', [], function() { 
    var ngConstant = require('gulp-ng-constant'), 
    var rename = require('gulp-rename'); 

    return 
     ngConstant({ 
      constants: { 
       apiContextPath: '.' // TODO Devise a way to set per environment; eg command line 
      }, 
      name: 'globals', 
      stream: true 
     }) 
     .pipe(rename('_config.js')) 
     .pipe(gulp.dest('target/build/scripts')); 
}); 

Natürlich müssen Sie enthalten die erzeugte Datei in Ihrem (verpackt/minified) Code:

Die folgende Aufgabe in gulpfile.js wird die Datei target/build/scripts/_config.js mit dem Inhalt angular.module('globals', []).constant('apiContextPath', '...'); erzeugen.

Etwas nach dem folgenden Code wird das $httpProvider konfigurieren, dass die apiContextPath auf alle Anforderungen vorangestellt, die mit '/api/' (dh unsere REST-Endpunkte) starten:

angular.module(...).config(['$httpProvider', function($httpProvider) { 
    $httpProvider.interceptors.push(['globals', function(globals) { 
     return { 
      'request': function(config) { 
       if(config.url.indexOf('/api/') === 0) { 
        config.url = globals.apiContextPath + config.url; 
       } 
       return config; 
      } 
     }; 
    }]); 
}]); 

(Es gibt durchaus ein paar andere Konfigurationsoptionen, so dass diese ist nur ein Beispiel aus einem älteren Projekt, an dem ich gearbeitet habe.)

Answer 2

Wenn Sie dies nicht bereits tun, könnten Sie Ihrem Schluck einen Parameter zum Erstellen im Produktions- oder Entwicklungsmodus übergeben.

Basierend auf dieser Flagge Sie eine baseUrl Eigenschaft in Ihrem gulpfile festlegen können, bauen ein Skript enthalten (mit gulp-insert) in Ihr Javascript verwendet wird, bevor alle Ihre Winkel Skripte:

'window.baseUrl = ' + baseUrl 

Dann könnten Sie haben eine konstante in Ihrer Anwendung, die Ihre Dienste die baseUrl zu bekommen verwenden:

angular.module('YourModule').constant('baseUrl', window.baseUrl);