URLをハードコーディングせずにAPIサーバーにリクエストするにはどうすればよいですか？

Question

私は角度2のアプリケーションを実装しようとしており、APIサーバにリクエストを行う必要があります。しかし、すべてのリクエストで完全なURLをハードコードするのは悪い考えだと思います。私はこの投稿を見て： Set base url for angular 2 http requests

しかし、それはベータ版で動作します。私はRC6を使用しており、動作させることはできません。どんな助けもありがとう。

Answer 1

クライアントコードを提供する同じサーバー上でjsonバックエンドを実行する場合、urlにportを指定する必要はありません。私は/ api /の下にすべての私のサービスを持っているような他のURLの設定のために、私は/ api/hardcodedを持っているすべての設定などを扱う別のヘルパークラスを使用しますが、それはその1つだけです。手動またはビルド中に簡単に変更できます。

クラスは、そのようなものにすることができます

export class Configuration { 
    private static _apiUrl = "/api"; 
    private static _childUrl = `${Configuration._apiUrl}/child`; 

    public static apiUrl(url: string): string { 
     return `${this._apiUrl}/${url}`; 
    } 

    public static getChildComponentUrl(url: string): string { 
     return `${this._childUrl}/${url}`; 
    } 
} 

Answer 2

Gulpのようなビルドツールで角型アプリケーションを構築する場合、ビルド時にアプリのベースURLを制御できます。実行時にベースURLを切り替えることはできませんが、ローカルマシンまたは単一のコマンドでサーバーを指すようにアプリケーションを構築することができます。

gulpfile.js：あなたのindex.htmlで

var gulpUtil = require('gulp-util'); 
var gulpData = require('gulp-data'); 
var gulpTemplate = require('gulp-template'); 

var sourceDir = 'path/to/src'; 
var buildDir = 'path/to/build/target'; 

gulp.task('default', [], 
     function() { 
      return gulp.src(sourceDir + 'index.html') 
       .pipe(gulpData(function() { 
         return { 
          baseUrl : gulpUtil.env.baseUrl 
         }; 
        })) 
       .pipe(gulpTemplate()) 
       .pipe(gulp.dest(buildDir)); 
     }); 

、その後：あなたは一口を実行したときに

<script> 
    angular.module('myApp', []) 
    .provider('appConfigProvider', function() { 
     return { 
     $get: function() { 
      return { 
       baseUrl: '<%= baseUrl %>' 
      }; 
     } 
     }; 
    }); 
</script> 

はその後、コマンドライン引数としてbaseUrlに提供：

gulp --baseUrl https://my.server.com 

これは、gulpUtil.env内で使用可能な環境変数を設定します。たとえば、propsファイルやgulp-props（私はそれを使用していませんが）を介して設定を提供することもできます。 1つのコマンドで角型アプリケーションを設定することは、Gulpのようなタスクランナーのための私の好きな使い方の1つです。

幸運を祈る！