「AngularでREST API からデータ取得して一覧表示」の基本

● サービス BoardsService の作成

ng g service services/boards
CREATE src/app/services/boards.service.spec.ts (333 bytes)
CREATE src/app/services/boards.service.ts (135 bytes)
ng g コマンドでサービスを生成した場合、そのサービスは root に所属します。appモジュールではありません。

以下のように @Injectable に providedIn というのが追加になっていて、

@Injectable({
  providedIn: 'root'
})

どのモジュールから追加されるのか指定できるようになってます。
ここが 'root' の場合は app/app.module.ts への登録不要で Dependency Injection できます。
なお root 所属のサービスは全てのモジュールで同じインスタンスが利用されます(つまりシングルトン)。

引用: https://bit.ly/3d1U2bA

● app/app.module.ts に 外部モジュールの登録

import { HttpClientModule } from '@angular/common/http';
  imports: [
    .................................
    HttpClientModule,
  ],

● environments/environment.ts に 開発用 / 本番用 URL をセット

environments/environment.ts

export const environment = {
  production: false ,
  apiUrl: 'http://localhost:5000'
};

environments/environment.prod.ts

export const environment = {
  production: true ,
  apiUrl: 'http://localhost:5000'
};

● サービス「BoardsService」にロジックを記述

app/services/boards.service.ts を以下の内容で保存

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

@Injectable({
  providedIn: 'root'
})
export class BoardsService {

  constructor(private httpClient: HttpClient) { }

  getIndex(): Observable<any> {
    return this.httpClient.get(environment.apiUrl + '/boards/');
  }
}

● コンポーネント「BoardsComponent」で一覧を表示

app/boards/boards.component.ts を以下の内容で保存

1. メンバ変数を定義

export class BoardsComponent implements OnInit {
  boards_loop = [];

2. DI に追加

  constructor(
               private boardsService: BoardsService ,
            ) 

3. ngOnInit() のタイミングでデータ取得

  ngOnInit() {
    this.boardsService.getIndex().subscribe(res => {
      this.boards_loop = res;
    });
  }

app/boards/boards.component.html に以下を追加

<ul>
<li *ngFor="let board of boards_loop">
    <span>{{board.id}}</span> : {{board.name}}
</li>
</ul>
No.1791
06/15 17:15

edit