Recherche…


Remarques

J'ai principalement demandé ce sujet car je n'ai trouvé aucune information sur la configuration de plusieurs routes API avec Angular2-In-Memory-Web-Api. J'ai fini par le découvrir moi-même et j'ai pensé que cela pourrait être utile aux autres.

Configuration de base

mock-data.ts

Créer les données api simulées

export class MockData {
  createDb() {
    let mock = [
      { id: '1', name: 'Object A' },
      { id: '2', name: 'Object B' },
      { id: '3', name: 'Object C' },
      { id: '4', name: 'Object D' }
    ];
    
    return {mock};
  }
}

main.ts

Demandez à l'injecteur de dépendance de fournir les demandes InMemoryBackendService pour XHRBackend. Aussi, fournissez une classe qui comprend un

createDb()
function (dans ce cas, MockData) spécifiant les routes d'API simulées pour les requêtes SEED_DATA.

import { XHRBackend, HTTP_PROVIDERS } from '@angular/http';
import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';
import { MockData } from './mock-data';
import { bootstrap } from '@angular/platform-browser-dynamic';

import { AppComponent } from './app.component';

bootstrap(AppComponent, [
    HTTP_PROVIDERS,
    { provide: XHRBackend, useClass: InMemoryBackendService },
    { provide: SEED_DATA,  useClass: MockData }
]);

mock.service.ts

Exemple d'appel d'une requête get pour la route API créée

import { Injectable }     from '@angular/core';
import { Http, Response } from '@angular/http';
import { Mock } from './mock';

@Injectable()
export class MockService {
  // URL to web api
  private mockUrl = 'app/mock';

  constructor (private http: Http) {}

  getData(): Promise<Mock[]> {
    return this.http.get(this.mockUrl)
                    .toPromise()
                    .then(this.extractData)
                    .catch(this.handleError);
  }

  private extractData(res: Response) {
    let body = res.json();
    return body.data || { };
  }

  private handleError (error: any) {
    let errMsg = (error.message) ? error.message :
      error.status ? `${error.status} - ${error.statusText}` : 'Server error';
    console.error(errMsg);
    return Promise.reject(errMsg);
  }
}

Configuration de plusieurs routes API de test

mock-data.ts

export class MockData {
    createDb() {
        let mock = [
            { id: '1', name: 'Object A' },
            { id: '2', name: 'Object B' },
            { id: '3', name: 'Object C' }
        ];
        
        let data = [
            { id: '1', name: 'Data A' },
            { id: '2', name: 'Data B' },
            { id: '3', name: 'Data C' }
        ];

        return { mock, data };
    }
}

Maintenant, vous pouvez interagir avec les deux

app/mock
et
app/data
pour extraire leurs données correspondantes.



Modified text is an extract of the original Stack Overflow Documentation
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow