Angular 2
API Web Angular2 in memoria
Ricerca…
Osservazioni
Ho principalmente richiesto questo argomento perché non sono riuscito a trovare alcuna informazione sull'impostazione di più percorsi API con Angular2-In-Memory-Web-Api. Finito per capirlo da solo, e ho pensato che questo potesse essere d'aiuto agli altri.
Impostazione di base
mock-data.ts
Creare i dati di API mock
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
Chiedere all'iniettore di dipendenza di fornire InMemoryBackendService per le richieste XHRBackend. Inoltre, fornire una classe che include a
createDb()funzione (in questo caso, MockData) che specifica i percorsi API simulati per le richieste 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
Esempio di chiamata di una richiesta di acquisizione per la rotta dell'API creata
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);
}
}
Impostazione di più percorsi API di 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 };
}
}
Ora puoi interagire con entrambi
app/mocke
app/dataper estrarre i loro dati corrispondenti.
Modified text is an extract of the original Stack Overflow Documentation
Autorizzato sotto CC BY-SA 3.0
Non affiliato con Stack Overflow