Angular2 In Memory Web API All Versions

Examples

• 2

  Setting Up Multiple Test API Routes
  2

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

  Now, you can interact with both

  app/mock

  and

  app/data

  to extract their corresponding data.

  created Sep 12 '16 at 14:11

  
  edit share view discussion request improvement

  edit move example delete example
• 0

  Basic Setup
  0

  mock-data.ts

  Create the 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

  Have the dependency injector provide the InMemoryBackendService for XHRBackend requests. Also, provide a class that includes a

  createDb()

  function (in this case, MockData) specifying the mocked API routes for SEED_DATA requests.

  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

  Example of calling a get request for the created API route

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

  created Sep 12 '16 at 14:11

  
  edit share view discussion request improvement

  edit move example delete example