Angular が提供している in memory web api の使い方を紹介します。
アプリケーションを開発する際に、サーバー側で REST API を用意するほどではないモックアップ作成時に便利な簡易 REST API です。
angular/in-memory-web-api
https://github.com/angular/in-memory-web-api
パッケージのインストール
npm i angular-in-memory-web-api
InMemoryDbService 実装クラスの用意
InMemoryDbService 実装クラスで、createDb() メソッド内にデータを実装しておきます。
product.service.ts
import { InMemoryDbService } from 'angular-in-memory-web-api'; export class ProductService implements InMemoryDbService { createDb() { const products = [ { id: 1, name: 'orange juice' }, { id: 2, name: 'green tea' }, { id: 3, name: 'oolong tea' }, { id: 4, name: 'tomato juice' } ]; return { products }; } }
HttpClientInMemoryWebApiModule のインポート
InMemoryDbService 実装クラスをモジュールに登録します。
app.module.ts
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { HttpClientModule } from '@angular/common/http'; import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api'; import { AppComponent } from './app.component'; import { ProductService } from './product.service'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, HttpClientModule, HttpClientInMemoryWebApiModule.forRoot(ProductService) ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
API の呼び出し
in-memory-web-api への通信は、HttpClient モジュールを通じて行うことができます。(HttpClient の通信を捕まえて、createDb() メソッドに実装しているインメモリデータを返します。)
app.component.ts
import { ProductService } from './product.service'; import { Component } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { constructor(private http: HttpClient) { } title = 'InMemoryDbService'; async getProducts() { const res = await this.http.get('/api/products/').toPromise(); console.log(res); } }
app.component.html
<button (click)="getProducts()">get products</button>