Angular 2
API Web Angular2 In Memory
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/mocket
app/datapour 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