Angular 2
Angular2 en la memoria web de la API
Buscar..
Observaciones
Solicité principalmente este tema porque no pude encontrar ninguna información sobre la configuración de múltiples rutas API con Angular2-In-Memory-Web-Api. Terminé resolviéndolo yo mismo, y pensé que esto podría ser útil para otros.
Configuración básica
mock-data.ts
Crear los datos api simulados
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
Haga que el inyector de dependencia proporcione las solicitudes InMemoryBackendService para XHRBackend. Además, proporcionar una clase que incluye una
createDb()Función (en este caso, MockData) que especifica las rutas de API simuladas para las solicitudes 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
Ejemplo de llamada a una solicitud de obtención para la ruta API creada
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);
}
}
Configuración de múltiples rutas API de prueba
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 };
}
}
Ahora, puedes interactuar con ambos
app/mocky
app/dataPara extraer sus datos correspondientes.
Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow