angularjsで開発と生産に異なるドメインを使用する

Question

私は、RESTサービスを使用するAngularJSシングルページアプリケーションで作業しています。フロントエンドアプリケーションはバックエンドとは別に開発されているため、開発中にAJAX呼び出しのURLにドメイン名をハードコードする必要があります（CORSを有効にしています）。しかし、制作の場合、すべてが同じドメインで実行されているため、ドメイン名をハードコーディングするのは少し悪く見えます。開発中にajax呼び出し用のURLにドメイン名を使用できますか？本番環境ではドメイン名をハードコードしませんか？私はギャルプを使用しています。

Answer 1

$httpでgulp-ng-constantの使用例：あなたのサービスがbaseUrlを取得するために使用アプリケーション内の定数：gulpfile.jsで

次のタスクの内容angular.module('globals', []).constant('apiContextPath', '...');でファイルtarget/build/scripts/_config.jsを生成します。もちろん、あなたの（縮小さ/パック）で生成されたファイルをインクルードする必要があり

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')); 
}); 

コード。次のコードに沿って

何かが'/api/'で始まるすべてのリクエスト（つまり、私たちのRESTエンドポイント）へapiContextPathを付加する$httpProviderを設定します：

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; 
      } 
     }; 
    }]); 
}]); 

（かなりの数の他の設定オプションがありますので、この

Answer 2

まだ作成していない場合は、gulpビルドにパラメータを渡して、本番モードまたは開発モードでビルドすることができます。そして、あなたが持っている可能性が

'window.baseUrl = ' + baseUrl 

：あなたの角度スクリプトのすべての前に構築し、あなたのjavascriptに（gulp-insertを使用して）スクリプトを含めるために使用されているあなたのgulpfileでbaseUrlプロパティを設定することができ、そのフラグに基づいて

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