はじめに

AngularはTypeScriptベースのフロントエンドWebアプリケーションフレームワークです。そしてSPAです。Angularだけを実装して動的なアプリを作ることができません。最終的には、バックエンドのアプリを作ることが理想です。今回は、Angular 8を使ってローカルのjsonをAPIとして受け取るアプリを作ってみます。後々urlでの遷移を表現するつもりで --routingも追加します。そして、今回はローカルのjsonファイルをapiの返り値として返しますが、最終的にはrailsとかでバックエンドのプログラムを用意して、処理の結果のjsonをrailsとかから返すことが理想です。

実装

ng new angular-front --routing

そしてアプリを起動させましょう

cd ./angular-front
ng serve --open  --port 3005

次に、jsonにデータを作っていきます

mkdir src/assets/data
touch src/assets/data/smartphone.json
vim src/assets/data/smartphone.json

データを入れていきます

[
  {
    "id": "0",
    "name": "SONY phone"
  },
  {
    "id": "1",
    "name": "APPLE phone"
  },
  {
    "id": "2",
    "name": "SAMSUNG phone"
  }
]

これで、ローカルJSONファイルを Angular HttpClient で使用する準備が整いました。では、Angular 8 HttpClient のセットアップします。 src/app/app.module.tsを開いて @angular/common/http の一部である HttpClientModule をインポートを追加します。

import { HttpClientModule } from '@angular/common/http';

そして BrowserModule の後に @NgModule imports 配列に追加します。

imports: [
  BrowserModule,
  HttpClientModule
],

`

これで、Angular HttpClient は、Angularサービスまたはコンポーネントを使用または注入する準備が整いました。次に、ng gコマンド を使用して Angular Service を生成します。

ng g service api

src/app/api.service.tsを開いて @angular/common/http の一部である HttpClient のインポートを追加します。

import { HttpClient } from '@angular/common/http';

その HttpClient モジュールを Angular サービスのコンストラクターに挿入します。

export class ApiService {
  constructor(private http: HttpClient) { }

JSONファイルのローカルURLを保持する @Injectable の前に定数変数を宣言します。もしRAILSなどでapiを作ってたらここはrailsのurlにしましょう

const localUrl = 'assets/data/smartphone.json';

そしてconstructorの下に getSmartphone 関数を追加します

export class ApiService {
  constructor(private http: HttpClient) { }
  getSmartphone() {
    return this.http.get(localUrl);
  }
}

これで、AngularコンポーネントからJSON呼び出しにアクセスできます。 src/app/app.component.tsを開いて編集し、Angular OnInit および ApiService のこれらのインポートを追加または変更します。

import { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';

ApiServiceをコンストラクターに注入します。

export class AppComponent {
  constructor(private api: ApiService) {}

データサブスクリプションからの応答を保持するコンストラクターの前に変数を追加します。

smartphone: any = [];

ApiServiceから発信されるデータをブラウザのログとして表示する実装をします。

getSmartphones() {
  this.api.getSmartphone()
    .subscribe(data => {
      for (const d of (data as any)) {
        this.smartphone.push({
          name: d.name,
          price: d.price
        });
      }
      console.log(this.smartphone);
    });
}

最後に、getSmartphones を constructor の下で呼び出します。

  ngOnInit() {
    this.getSmartphones();
  }

結果的に、ブラウザのコンソールに下記のようにapiからデータが取得できていると思います

(3) [{…}, {…}, {…}]
0: {name: "SONY phone", price: undefined}
1: {name: "APPLE phone", price: undefined}
2: {name: "SAMSUNG phone", price: undefined}
length: 3
__proto__: Array(0)

参考

今回の記事の参考は Angular 8 Tutorial: REST API and HttpClient Examplesになります。