Angulaire 2 - trouver Dynamiquement l'url de base à utiliser dans les requêtes http (services)

Je me demandais si il n'y est une façon dynamique d'obtenir l'url de base, à utiliser dans les requêtes http?

Est-il possible d'obtenir le http://192.123.24.2:8080 dynamiquement?

public getAllTickets() {
    this._http.get('http://192.123.24.2:8080/services/', {
        method: 'GET',
        headers: new Headers([
            'Accept', 'application/json',
            'Content-Type', 'application/json'
        ])
    })

Donc, j'ai ma requête devrait ressembler à quelque chose comme:

public getAvailableVersions() {
    this._http.get('../services', {
        method: 'GET',
        headers: new Headers([
            'Accept', 'application/json',
            'Content-Type', 'application/json'
        ])
    })

Je suis à la recherche d'un moyen pour ne pas avoir à coder en dur l'URL pour le RESTE des appels. Ou est la seule option pour avoir une variable globale avec l'URL?

Merci!

Est-ce que vous cherchez: window.location.host?
Merci!!!!! Que résolu.
Double Possible de Définir l'url de base angulaire 2 requêtes http
Cependant, je pense que dans mon prochain solution, je vais mettre une variable globale. Je vais ajouter un commentaire dans ce post quand j'ai mis en place 🙂

OriginalL'auteur Sojye | 2016-02-18

  1. 3

    Vous pouvez créer un fichier avec vos informations d'identification

    informations d'identification.ts

    export var credentials = {
  client_id: 1234,
  client_secret: 'secret',
  host: 'http://192.123.24.2:8080'
}

    Et l'importer dans votre fichier

    import {credentials} from 'credentials'

public getAllTickets() {
    this._http.get(credentials.host + '/services/', {
        method: 'GET',
        headers: new Headers([
            'Accept', 'application/json',
            'Content-Type', 'application/json'
        ])
    })

    Et avec qui vous pouvez gérer dev/prod informations d'identification

    Dans la pratique, est-ce la meilleure façon de définir l'url de base?

    OriginalL'auteur Raphael

  2. 3

    Avec la version 2.0.0-bêta.6 de Angular2, vous pouvez remplacer la merge méthode

    import {BaseRequestOptions, RequestOptions, RequestOptionsArgs} from 'angular2/http';

export class CustomRequestOptions extends BaseRequestOptions {

  merge(options?:RequestOptionsArgs):RequestOptions {
    options.url = 'http://192.123.24.2:8080' + options.url;
    return super.merge(options);
  }
}

    Vous pouvez vous inscrire à cette classe de cette façon:

    bootstrap(AppComponent, [HTTP_PROVIDERS,
    provide(BaseRequestOptions, { useClass: CustomRequestOptions })
]);

    Une autre approche pourrait être d'étendre le HTTP objet d'ajouter au début de l'URL de la requête une URL de base.

    D'abord, vous pouvez créer une classe qui étend la Http une avec un baseUrl propriété:

    @Injectable()
export class CustomHttp extends Http {
  constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) {
    super(backend, defaultOptions);
    this.baseUrl = 'http://192.123.24.2:8080';
  }

  request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
    console.log('request...');
    return super.request(this.baseUrl + url, options).catch(res => {
      //do something
    });        
  }

  get(url: string, options?: RequestOptionsArgs): Observable<Response> {
    console.log('get...');
    return super.get(this.baseUrl + url, options).catch(res => {
      //do something
    });
  }
}

    et de l'inscrire comme décrit ci-dessous:

    bootstrap(AppComponent, [HTTP_PROVIDERS,
    new Provider(Http, {
      useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) => new CustomHttp(backend, defaultOptions),
      deps: [XHRBackend, RequestOptions]
  })
]);
    Je vais essayer de mettre en œuvre votre deuxième exemple dans mon prochain solution 🙂
    Vous ne pouvez pas ajouter à l'url dans la fonction de demande que si c'est toujours une chaîne de caractères. Il pourrait être un objet de Requête.
    Est-ce la solution de travail avec la méthode POST? et pourquoi votre deuxième solution ont encore de la méthode get, même s'il a demande si?

    OriginalL'auteur Thierry Templier

  3. -2
    import {LocationStrategy} from 'angular2/router';

constructor(private locationStrategy:LocationStrategy) {
  console.log(locationStrategy.prepareExternalUrl('xxx'));
}

    Voir aussi https://github.com/angular/angular/blob/1bec4f6c6135d7aaccec7492d70c36e1ceeaeefa/modules/angular2/test/router/path_location_strategy_spec.ts#L88

    OriginalL'auteur Günter Zöchbauer