Azure のサービスでクロスサイトオリジンを許可する

Azure のポータルサイトにログインし、次の順でメニューを進みます。

ダッシュボード > サービス名 > ファイアウォール設定

そして、画面に表示されている「クライアント IP アドレス」と識別名を追加し、「保存」ボタンを押します。「保存」ボタンを押さないと設定が反映されないのでご注意ください。

Angular in-memory-web-api を使う

Angular が提供している in memory web api の使い方を紹介します。
アプリケーションを開発する際に、サーバー側で REST API を用意するほどではないモックアップ作成時に便利な簡易 REST API です。

angular/in-memory-web-api
https://github.com/angular/in-memory-web-api

パッケージのインストール

npm i angular-in-memory-web-api

InMemoryDbService 実装クラスの用意

InMemoryDbService 実装クラスで、createDb() メソッド内にデータを実装しておきます。

product.service.ts

import { InMemoryDbService } from 'angular-in-memory-web-api';

export class ProductService implements InMemoryDbService {
  createDb() {
    const products = [
      { id: 1, name: 'orange juice' },
      { id: 2, name: 'green tea' },
      { id: 3, name: 'oolong tea' },
      { id: 4, name: 'tomato juice' }
    ];
    return { products };
  }
}

HttpClientInMemoryWebApiModule のインポート

InMemoryDbService 実装クラスをモジュールに登録します。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';

import { AppComponent } from './app.component';

import { ProductService } from './product.service';

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

API の呼び出し

in-memory-web-api への通信は、HttpClient モジュールを通じて行うことができます。(HttpClient の通信を捕まえて、createDb() メソッドに実装しているインメモリデータを返します。)

app.component.ts

import { ProductService } from './product.service';
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  constructor(private http: HttpClient) { }

  title = 'InMemoryDbService';

  async getProducts() {
    const res = await this.http.get('/api/products/').toPromise();
    console.log(res);
  }
}

app.component.html

<button (click)="getProducts()">get products</button>

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

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