Morioh
Login
中條 美冬

中條 美冬

1 year ago

APIからデータを取得し、AngularでHTMLテーブルを表示する方法

このチュートリアルでは、Angular 14 を使用して API からデータを取得し、それを HTML テーブルに表示するプロセスを説明します。API は最新の Web 開発に不可欠な部分であり、API からデータを抽出できることは非常に重要です。あらゆる開発者のためのスキル。HttpClientModule の設定、API エンドポイントの定義、HTTP リクエストの処理など、Angular での API の操作の基本について説明します。実践的な例と詳細な説明により、あらゆる API からのデータを使用できる強力な Web アプリケーションを構築する方法を学びます。

API からデータを取得/フェッチし、Angular 14 アプリのテーブルに表示するには、次の手順を使用します。

  • ステップ 1 – 新しい Angular アプリを作成する
  • ステップ 2 – HTTP モジュールをインポートする
  • ステップ 3 – ビュー ファイルにリスト HTML を作成する
  • ステップ 4 – API のサービスを作成する
  • ステップ 5 – コンポーネントで API サービスを使用する
  • ステップ 6 – Angular アプリを開始する

ステップ 1: 新しい Angular アプリを作成する

まず、ターミナルを開いて次のコマンドを実行して、Angular アプリをインストールします。

ng new my-new-app

ステップ 2: モジュールをインポートする

src/appディレクトリにアクセスし、 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';
   
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

ステップ 3: ビュー ファイルにリスト HTML を作成する

Angular アプリで API サービスを使用してリストを表示するための単純な HTML を作成します。したがって、src/app/app.component.html にアクセスし、次のコードを更新します。

<h1>Angular 14 HttpClient for Sending Http Request Example</h1>
   
<ul class="list-group">
  <li
      *ngFor="let post of posts"
      class="list-group-item">
      {{ post.title }}
  </li>
</ul>

ステップ 4: API のサービスを作成する

ターミナルを開き、次のコマンドを実行して http クライアント要求用のサービスを作成します。次のように：

ng g s services/post

次に、src/app/ ディレクトリにアクセスし、post.service.tsを開きます。次に、次のコードをpost.service.tsファイルに追加します。

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
   
@Injectable({
  providedIn: 'root'
})
export class PostService {
  private url = 'http://jsonplaceholder.typicode.com/posts';
    
  constructor(private httpClient: HttpClient) { }
   
  getPosts(){
    return this.httpClient.get(this.url);
  }
   
}

ステップ 5: コンポーネントで API サービスを使用する

src/app ディレクトリにアクセスし、app.component.tsを開きます。次に、次のコードをcomponent.tsファイルに追加します。

import { Component, OnInit } from '@angular/core';
import { PostService } from './services/post.service';
   
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  posts:any;
   
  constructor(private service:PostService) {}
   
  ngOnInit() {
      this.service.getPosts()
        .subscribe(response => {
          this.posts = response;
        });
  }
}

ステップ 6: Angular アプリを開始する

このステップでは、ターミナルで次のコマンドを実行して、Angular アプリを起動します。

ng serve

Web ブラウザを開き、次のように指定された URL を入力します。

http://localhost:4200

このチュートリアルでは、API からデータを取得/フェッチし、それを Angular 14 アプリのテーブルに表示する方法を学習しました。

3.10 GEEK