WebAPIのモックを用意する｜AngularでWebサイト作成
Angularの学習の為に、AngularでWebサイトを作ってみることにしました（Angularのバージョンは4.3.6です）。
適宜作業内容をまとめていきます。
基本的な部分は公式チュートリアルなどを参考にしながら進めています。
今回は、前回までで作成したCRUDのリクエストに対するレスポンスを返すWebAPIを用意します。
ただし、サーバサイドのAPIを実装するのではなく、モックとしてAngularでJSONをレスポンスで返すことのできるライブラリを使用していきます。
開発環境
・OS：Windows8.1 64bit
・node：v7.2.1
・npm：4.0.5
・Angular：4.3.6
・開発ツール：VisualStudioCode
手順
手順1.ライブラリの追加
npmで追加インストールします。
1 2 | cd APP_NAME //←アプリケーションを作成したディレクトリに移動npm i angular-in-memory-web-api --save |
手順2.JSONを格納するserviceファイルを作成
以下のような「memorydata.service.ts」を作成します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | import { InMemoryDbService } from 'angular-in-memory-web-api';import { User } from './user/user';import { Fruit } from './fruit/fruit';export class InMemoryDataService implements InMemoryDbService { createDb() { let users :User[] = [ {id:1,name:'太郎'}, {id:2,name:'次郎'}, {id:3,name:'三郎'} ]; let fruits :Fruit[] = [ {id:1,name:'リンゴ',price:100}, {id:2,name:'バナナ',price:80}, {id:3,name:'イチゴ',price:300} ]; return {users,fruits}; }} |
「InMemoryDbService」はnpmでインストールした「angular-in-memory-web-api」に含まれているクラスで、
これを実装するクラスとして上記のクラス「InMemoryDataService 」を作成していきます。
インポートしているUserやFruitはBeanクラスのようなもので、コンポーネントなどでも利用していましたが、１括り（ユーザ情報など）のデータを格納するオブジェクト用のクラスです。各コンポーネントのディレクトリ以下の様に定義します。例えばUserクラスであれば以下のuser.tsのようになります。
1 2 3 4 | export class User { id:number name:string} |
手順3.app.module.tsを編集
上記のファイルをimportするようにapp.module.tsを編集します。
1 2 3 4 5 6 7 8 9 10 | import { InMemoryWebApiModule } from 'angular-in-memory-web-api'; //←追加import { InMemoryDataService } from './memorydata.service'; //←追加～省略～@NgModule({ ～省略～ imports: [ ～省略～ InMemoryWebApiModule.forRoot(InMemoryDataService), //←追加 ], |
手順4.サービスを編集
各APIへリクエストを送るリクエストURLを変更します。
・user一覧取得なら「app/users」、
・user詳細取得ならGETメソッドで「app/users/{id}」
・user更新ならPUTメソッドで「app/users/{id}」
・user削除ならDELETEメソッドで「app/users/{id}」
（{id}のところには該当UserのIDを指定）
といった具合にするとモックAPIにリクエストが送信されます。
手順5.確認
ブラウザにて確認をしてみましょう。注意する点は、ページをリロードすると追加・編集した内容は初期のJSONデータの状態に戻るということです。編集情報が永続的に保存されるわけではありません。
感想
SPAの開発を行う上で、サーバ側のAPI実装が必要になりますが、フロント側だけ先行して実装したい様な場合、とても便利だと思いました。
WEBアプリケーション関連 人気連載リンク
基礎からPHPWEBアプリ解発を学ぶなら・・
PHP基礎 連載
より実践的なWEBアプリ開発講座！Bootstrap活用を学ぶなら・・
魁！小野の塾 連載
