ホーム

REST APIとHttpClient入門 - Angular 8チュートリアル

はじめに

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

最後に、getSmartphonesconstructor の下で呼び出します。

  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になります。

Pocket
LinkedIn にシェア

エンジニアにおすすめできる本

Card image cap
リーダブルコード

より良いコードを書くためのシンプルで実践的なテクニック

Card image cap
Webを支える技術

HTTP,URI,HTML,そしてREST

Card image cap
誰でもPythonで作れる

儲かるAIとソフトウェアの作り方

Card image cap
プログラマが知るべき97のこと

現場で使える実践哲学のマスターピース

Card image cap
情熱プログラマー

時代を超えて。ソフトウェア開発者の幸せな生き方

Card image cap
アジャイルサムライ

プログラミング達人開発者への道

Card image cap
Rubyを作った男 まつもとゆきひろ

コードの世界 スーパー・プログラマになる14の思考法

ご提供 sponsor
 

Meee!(ミー)は、ビジネスからプライベート利用まで、個人のスキルを気軽に売り買いできるスキルマーケットです。カテゴリや居住地から、検索することが可能です。

 

ランゲージエクスチェンジは、ネイティブスピーカーと気軽にマッチングできる言語交換プラットフォームです。あなたの地元に住む外国人を探したり、留学や海外移住の前に、現地のネイティブスピーカーと繋がることもできます!

宣伝
 

りょすけトークchは、仕事や私生活をより豊にするYouTubeチャンネルです。文献(本、映画、論文)から役に立つ情報をまとめ、生涯にわたり役に立つ哲学をお届けしています。是非、チャンネル登録してみてね

-ホーム
-

Copyright© offブログ! , 2021 All Rights Reserved Powered by AFFINGER5.