Cuando estamos empezando a desarrollar nuestra aplicación web con Angular 2, no siempre tenemos al principio nuestro backend que nos devuelva los datos que necesitamos. Para simular esto, podemos utilizar en estas primeras etapas de desarrollo, no en producción, InMemoryDataService:
1) Instalamos angular2-in-memory-web-api
npm install angular2-in-memory-web-api --save
2) Creamos nuestro servicio in-memory-data.service.ts
import { InMemoryDbService } from 'angular2-in-memory-web-api'; import {Mock} from './mock'; export class InMemoryDataService implements InMemoryDbService { createDb() { let mocks: Mock[] = [ { id: 1, name: 'aaa'}, { id: 2, name: 'bbb'} ]; return {mocks}; } }
3) En app.module.ts incluimos los imports
import { InMemoryWebApiModule } from 'angular2-in-memory-web-api'; import { InMemoryDataService } from './in-memory-data.service'; .... imports: [ ... InMemoryWebApiModule.forRoot(InMemoryDataService) ], ...
4) Creamos nuestro servicio utilizando la url "api/mocks"
import { Injectable } from '@angular/core'; import {Mock} from './mock'; import { Headers, Http } from '@angular/http'; import 'rxjs/add/operator/toPromise'; @Injectable() export class MocksService { private headers = new Headers({'Content-Type': 'application/json'}); private mocksUrl = 'api/mocks'; constructor(private http: Http) { } getMocks(): Promise{ return this.http.get(this.mocksUrl) .toPromise() .then(response => response.json().data as Mock[]) .catch(this.handleError); } addMock(mock: Mock): Promise { return this.http .post(this.mocksUrl, mock, {headers: this.headers}) .toPromise() .then(res => res.json().data) .catch(this.handleError); } private handleError(error: any): Promise { console.error('An error occurred', error); // for demo purposes only return Promise.reject(error.message || error); } }