Angular 2
Angular2 In Memory Web API

AngularJS CSS firebase HTML ionic2 ionic-framework JavaScript jQuery Node.js TypeScript
Sök…


Anmärkningar

Jag begärde främst detta ämne eftersom jag inte kunde hitta någon information om hur man ställer in flera API-rutter med Angular2-In-Memory-Web-Api. Avslutade med att räkna ut det själv och tänkte att detta kan vara till hjälp för andra.

Grundläggande installation

mock-data.ts

Skapa mock api-data 

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

Låt beroendeinjektorn tillhandahålla InMemoryBackendService för XHRBackend-förfrågningar. Ge också en klass som inkluderar en 

createDb()
-funktion (i detta fall MockData) som anger de hånade API-rutter för SEED_DATA-förfrågningar. 

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

Exempel på att ringa en get-begäran för den skapade API-rutten 

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);
  }
}

Ställa in flera test-API-rutter

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 };
    }
}

Nu kan du interagera med båda 

app/mock
och 
app/data
för att extrahera motsvarande data.



Modified text is an extract of the original Stack Overflow Documentation
Licensierat under CC BY-SA 3.0
Inte anslutet till Stack Overflow