Angular HttpClient を利用した HTTP 通信

Angular で HTTP 通信を行う際には、HttpClient を利用します。

app.module.ts

@angular/common/http にある HttpClientModule をインポートします。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';

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

app.component.ts

HttpClient を DI で参照します。HttpClient は HTTP 通信の動詞(get, post, put, delete など) に対応するメソッドが用意されています。用途に合うメソッドを呼び出します。ここでは、get メソッドでリソースの取得を行っています。データは subscribe することで取得することができます。

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

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

  constructor(private http: HttpClient) {

  }

  getData() {
    this.http.get('https://localhost:5001/api/items').subscribe(response => {
      console.log(response);
    });
  }
}

app.component.html

参考までに、AppComponent に対応する HTML テンプレートの実装を記述しておきます。

<button (click)="getData()">http 通信</button>

※ HTTP 通信をする際に、サーバー側でクロスオリジン制約により通信が弾かれてしまう場合、制限を解除して通信を行ってください。

参考：ASP.NET Core Web API クロスオリジンを許可する方法
https://kainobi2.blogspot.com/2019/01/aspnet-core-web-api.html


Angular に関連するトピックは次のページにまとめてあります。

Angular 機能紹介一覧
https://kainobi2.blogspot.com/2019/02/angular.html