Angular JS $リソースのベースURLをパラメタリ化

Question

私はいくつかのAngular JS $リソース定義を使用していますが、それらはすべてコンフィグレーションサービスからベースURLを取得します。たとえば、

$resource(config.baseURL() + '/api/v2/foo/:id', {id: '@id'}) 

$resource(config.baseURL() + '/api/v2/bar/:id', {id: '@id'}) 

この理由は、アプリケーションが最初に読み込まれたときにクエリ文字列パラメータを使用してベースURLを変更できるためです。

$リソースによって使用されるURLが1回だけ初期化されるので、特定の$リソースのURLが初期化される競合状態が発生する可能性があることがわかりましたの前にベースURLクエリ文字列パラメータが扱われます。 //が%2F%2Fに変換されます - -

$resource(':baseURL/api/v2/foo/:id', {baseURL: config.baseURL(), id: '@id'}) 

は、残念ながら、ベースURLがエスケープなっているので、全体のURLは、正常に動作しません。だから私は、これに$リソース宣言を変更しようとしました。

このパラメータのエスケープを抑制する方法はありますか？ （または一般的に問題を解決するためのより良い方法）？

Answer 1

$ロケーションサービスを利用しないのはなぜですか？

たとえば、ベースURLを処理するにはどうすればよいですか？また、アプリケーションがlocalhostから実行されている場合は、ポート番号を含めますか？さらに、現在のURLに基​​づいてhttpまたはhttpsのいずれかを含めることができるでしょうか？

var host = $location.host(); 
if (host === "localhost") 
    host += ":" + $location.port(); 
var url = $location.protocol() + "://" + host + "/whateverElseYouWantInThePath"; 

を入力し、必要に応じてurlを入力してください。リソースの定義から

Answer 2

、

• @param {stringは}
• /user/:usernameと:で始まるパラメータでパラメータ化URLテンプレートのURL。 djResource('http://example.com\\:8080/api')：ポート番号（たとえば、
• http://example.com:8080/api）でURLを使用している場合は、このように、ポート
• 番号の前にコロン文字をエスケープする必要があります。

だから、ここで

config.baseUrl = function(){ 
    return 'http://server.com\\:port/rest_part/'; 
} 

Answer 3

は恐ろしいが、作業の回避策で、次のように）（あなたのconfig.baseURLを定義する必要があります。一度だけ評価される代わりに...の

$resource(config.baseURL() + '/api/v2/foo/:id', {id: '@id'}) 

...、ngResourceは各要求の前に評価される文字列-メソッドを実装しているオブジェクトを使用します。あなたがこれを取り組むことができます別の方法がある

var url = {}; 
url.value = function() {return config.baseURL() + '/api/v2/foo/:id'}; 
url.split = function (separator,limit) { return url.value().split(separator,limit) }; 
url.replace = function (match, other) { return url.value().replace(match, other) }; 
url.toString = function() { return url.value(); } 
$resource(url, {id: '@id'}) 

Answer 4

をプロバイダを使用し、コンフィグステージに設定します。

ここには私がしばらくして行ったのと同様の例があります。

設定段階で次に

.provider('Environment', function() { 
    var environments = { 
     dev: { 
      root: 'http://localhost', 
      port: 3000, 
      api: '/api', 
      version: 'v1' 
     } 
    }; 
    var selectedEnv = 'dev'; 
    var self = this; 

    this.setEnvironments = function (envs) { 
     if (!Object.keys(envs).length) 
      throw new Error('At least one environment is required!'); 

     environments = envs; 
    }; 

    this.setActive = function (env) { 
     if (!environments[env]) 
      throw new Error('No such environment present: ' + env); 

     selectedEnv = env; 
     return self.getActive(); 
    }; 

    this.getEnvironment = function (env) { 
     if (!env) 
      throw new Error('No such environment present: ' + env); 
     return environments[env]; 
    }; 

    this.getActive = function() { 
     if (!selectedEnv) 
      throw new Error('You must configure at least one environment'); 

     return environments[selectedEnv]; 
    }; 

    this.getApiRoute = function() { 
     var active = self.getActive(); 
     return active.root + (active.port ? ':' + active.port : '') + 
      active.api + (active.version ? '/' + active.version : ''); 
    }; 

    this.$get = [function() { 
     return self; 
    }]; 
}) 

：その後、いくつかのコントローラ/サービス/工場で

.config(function (EnvironmentProvider) { 

    EnvironmentProvider.setEnvironments({ 
     dev: { 
      root: 'http://10.0.0.3', 
      api: '/api', 
      version: 'v1' 
     }, 
     localonly: { 
      root: 'http://localhost', 
      api: '/api', 
      version: 'v1' 
     }, 
     prod: { 
      root: 'https://myapp.mybackend.com', 
      api: '/api', 
      version: 'v1' 
     } 
    }); 

    //Set prod as the active schema 
    EnvironmentProvider.setActive('prod'); 
}); 

：

.factory('API',function($resource, Environment){ 
return { 
    User: $resource(Environment.getApiRoute() + '/users/:id', {id: '@_id'}), 
    OtherResource: $resource(Environment.getApiRoute() + '/otherresource/:id', {id: '@_id'}) 
} 
});