AngularでAPIを叩く方法

Angular
スポンサーリンク

Angurlarで外部Webサーバ上のAPIを叩いて、データを取得して、画面上に表示するようなWebアプリケーションを作成したいと思います。


前提条件

・Angular CLI 8.3.0がインストールされていること

ワークスペースの作成とアプリ起動

以下のコマンドを実行し、ワークスペースを作成します。

ng new test-app

次に作成したワークスペースに移動し、以下のコマンドを実行して、サーバを起動します。

※同時にビルドも行われます。

ng serve –host 0.0.0.0

サーバを機能したら、 http://{ドメイン}:4200/  にアクセスします。

以下の Welcome ページが表示されたら起動成功です!!

データクラスとサービスの作成

初めに、APIから取得し情報を保持するクラス(data.ts)を作成します。

data.ts

export class data {
 dataId: number;
 dtaName: string;
}

次に上記で作成したデータクラスを管理するサービスクラス作成します。

以下のコマンドを実行して、サービスクラス(data.service.ts)を作成します。

ng generate service data

作成したサービスを有効にするために、モジュールに登録します。

app.module.ts


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { DataService } from './data.service';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
  ],
  providers: [
    DataService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

HTTPClientのインポート

HTTP通信を可能にするために、HttpClientをインポートします。

app.module.ts


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HttpClientModule }    from '@angular/common/http';
import { DataService } from './data.service';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [
    DataService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

API呼び出し

サービスクラス(data.service)の中に、apiの呼び出しからjsonを取得してデータクラス(data.ts)型の配列を返すメソッドを作成します。

事前に、以下のようなJSONデータをレスポンスするAPIを作成しております。(http://{ドメイン}/api/v1/data)

http://{ドメイン}/api/v1/data

[
    {
        "groupId": 1,
        "groupName": "データ1"
    },
    {
        "groupId": 2,
        "groupName": "データ2"
    },    
    {
        "groupId": 3,
        "groupName": "データ3"
    }
]
data.service.ts


import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { data } from './data';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  apiUrl = 'apiUrl = "http://{ドメイン}/api/v1/data";

  constructor(private httpclient: HttpClient) { }

  getSamples():Observable{
    return this.httpclient.get(this.apiUrl);
  }
}

次にコンポーネントの中で、先ほど作成した関数を呼び出します。

app.component.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
import { Data } from './data';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  title = 'test-app';
  Data: Data[];

  constructor(private dataService: DataService) {
  }

  ngOnInit(){
    this.dataService.getData()
    .subscribe
    (
      data=>{
        this.Data = data;
      }
    );
  }
}

データの表示

最後にapp.component.htmlの中に以下のように記述して保存します。

app.component.html


<div *ngFor="let data of Data">
  {{data.groupId}}
  {{data.groupName}}
</div>

以下のように表示されてれば正常に動作しております。

AngularによるモダンWeb開発 基礎編 第2版 | 末次 章 |本 | 通販 | Amazon
Amazonで末次 章のAngularによるモダンWeb開発 基礎編 第2版。アマゾンならポイント還元本が多数。末次 章作品ほか、お急ぎ便対象商品は当日お届けも可能。またAngularによるモダンWeb開発 基礎編 第2版もアマゾン配送商品なら通常配送無料。
Angularアプリケーションプログラミング | 山田 祥寛 | 工学 | Kindleストア | Amazon
Amazonで山田 祥寛のAngularアプリケーションプログラミング。アマゾンならポイント還元本が多数。一度購入いただいた電子書籍は、KindleおよびFire端末、スマートフォンやタブレットなど、様々な端末でもお楽しみいただけます。
Angular
スポンサーリンク
エンジニアの日記