Angular の概要

1. はじめに

作成するアプリの概要

この Codelab では、Angular を使用して住宅アプリを作成します。完成したアプリでは、ユーザーの検索に基づいて家のリスティングを表示したり、住宅の詳細情報を確認したりできるようになります。

Angular の強力なツールと優れたブラウザ統合を使用して、Angular ですべてを構築します。

これは本日作成するアプリです

学習内容

Angular CLI を使用して新しいプロジェクトをスキャフォールドする方法。
Angular コンポーネントを使用してユーザーインターフェースを作成する方法。
アプリのコンポーネントやその他の部分でデータを共有する方法。
Angular でイベントハンドラを使用する方法
Angular CLI を使用してアプリを Firebase Hosting にデプロイする方法。

必要なもの

HTML、CSS、TypeScript（JavaScript）、Git、コマンドラインに関する基本的な知識

2. 環境のセットアップ

ローカル環境を設定する

この Codelab を完了するには、次のソフトウェアをローカルマシンにインストールする必要があります。

Node バージョン ^12.20.2、^14.15.5、^16.10.0
コードエディタ - VS Code（または任意のコードエディタ）
VS Code 用 Angular Language Service プラグイン

Angular CLI をインストールする

依存関係がすべて構成されたら、Angular CLI をコンピュータのコマンドラインウィンドウからインストールできます。

npm install -g @angular/cli

構成が正しいことを確認するには、パソコンのコマンドラインから次のコマンドを実行します。

ng –version

コマンドが成功すると、以下のスクリーンショットのようなメッセージが表示されます。

Angular CLI 出力で Angular バージョンを表示

コードを取得する

この Codelab のコードには、さまざまなブランチでの中間ステップと最終的なソリューションが含まれています。まず、GitHub からコードをダウンロードしてください

新しいブラウザタブを開き、https://github.com/angular/introduction-to-angular に移動します。
コマンドラインから Windows をフォークし、リポジトリと cd introduction-to-angular/ のクローンを作成します。
スターターコードブランチから「git checkout get-started」と入力します。
任意のコードエディタでコードを開き、introduction-to-angular プロジェクトフォルダを開きます。
コマンドラインから npm install を実行し、サーバーの実行に必要な依存関係をインストールします。
Angular ウェブサーバーをバックグラウンドで実行するには、別のコマンドラインウィンドウを開き、ng serve を実行してサーバーを起動します。
ブラウザタブで http://localhost:4200 を開きます。

アプリが稼働したら、Fairhouse アプリの作成を開始できます。

3. 最初のコンポーネントを作成する

コンポーネントは、Angular アプリの中核的な構成要素です。部品は、建築用に使用されるれんがのようなものです。最初のブロックは性能がそれほど高くありませんが、他のブロックと組み合わせることで優れた構造を作り出すことができます。

Angular で作成されたアプリについても同様です。

コンポーネントには次の 3 つの主要要素があります。

テンプレートの HTML ファイル。
スタイルの CSSfile。
アプリの動作に関する TypeScript ファイル。

更新する最初のコンポーネントは AppComponent です。

コードエディタで app.component.html を開きます。これは AppComponent のテンプレートファイルです。
このファイルのコードをすべて削除して、次のように置き換えます。

<main>
  <header><img src="../assets/logo.svg" alt="fairhouse">Fairhouse</header>
  <section>
  </section>
</main>

コードを保存して、ブラウザを確認します。開発用サーバーを実行すると、変更内容がブラウザに保存され、ブラウザに反映されます。

おめでとうございます。最初の Angular アプリを更新しました。今後さらに改善される予定です。次へ。

次に、検索用のテキストフィールドと、UI にボタンを追加します。

UI を整理する機能など、コンポーネントには多くのメリットがあります。テキストフィールド、検索ボタン、そして場所のリストを含むコンポーネントを作成します。

この新しいコンポーネントを作成するには、Angular CLI を使用します。Angular CLI は、スキャフォールドやデプロイなどに役立つコマンドラインツールのセットです。

コマンドラインから次のように入力します。

ng generate component housing-list

このコマンドは次の部分から構成されます。

ng は、Angular CLI です。
このコマンドにより、実行するアクションのタイプが生成されます。この場合、何かのスキャフォールディングを生成します。
このコンポーネントは、作成する「内容」を表します。
Building-list はコンポーネントの名前です。

次に、新しいコンポーネントを AppComponent テンプレートに追加します。app.component.html で、テンプレートコードを更新します。

<main>
  <header><img src="../assets/logo.svg" alt="fairhouse">Fairhouse</header>
 <section>
   <app-housing-list></app-housing-list>
 </section>
</main>

すべてのファイルを保存し、ブラウザに戻ってメッセージ housing-list works が表示されることを確認します。
コードエディタで housing-list.component.html に移動し、既存のコードを削除して次のコードに置き換えます。

<label for="location-search">Search for a new place</label>
<input id="location-search" placeholder="Ex: Chicago"><button>Search</button>

housing-list.component.css で、次のスタイルを追加します。

input, button {
    border: solid 1px #555B6E;
    border-radius: 2px;
    display: inline-block;
    padding: 0;
}
input {
    width: 400px;
    height: 40px;
    border-radius: 2px 0 0 2px;
    color: #888c9c;
    border: solid 1px #888c9c;
    padding: 0 5px 0 10px;
}

button {
    width: 70px;
    height: 42px;
    background-color: #4468e8;
    color: white;
    border: solid 1px #4468e8;
    border-radius: 0 2px 2px 0;
}

article {
    margin: 40px 0 10px 0;
    color: #202845;
}
article, article > p {
    color: #202845;
}

article> p:first-of-type {
    font-weight: bold;
    font-size: 22pt;
}

img {
    width: 490px;
    border-radius: 5pt;
}

label {
    display: block;
    color: #888c9c;
}

ファイルを保存して、ブラウザに戻ります。

Angular アプリが形を始めます。

4. イベント処理

アプリに入力フィールドとボタンがありますが、その操作がありません。ウェブでは、通常、コントロールを操作して、イベントとイベントハンドラの使用を呼び出します。この戦略を使用してアプリを作成します。

これらの変更は housing-list.component.html後に行います。

クリックハンドラを追加するには、ボタンにイベントリスナーを追加する必要があります。Angular では、イベント名をかっこで囲み、値を割り当てます。ここでは、ボタンがクリックされたときに呼び出すメソッドに名前を付けます。searchHousingLocations とします。この関数名の末尾には、必ずかっこを追加してください。

次のコードに合わせてボタンコードを更新します。

<button (click)="searchHousingLocations()">Search</button>

このコードを保存して、ブラウザを確認してください。コンパイルエラーが発生しました。

searchHousingLocations メソッドが存在しないため、アプリはこのエラーをスローします。この状態は、ユーザーが変更する必要があります。

housing-list.component.ts で、HousingListComponent クラスの本文の末尾に新しいメソッドを追加します。

 searchHousingLocations() {}

この方法の詳細は後ほど入力します。

ブラウザを更新してエラーを解決するには、このコードを保存します。

次のステップでは、入力フィールドの値を取得し、それを searchHousingLocations メソッドの引数として渡します。テンプレート変数と呼ばれる Angular 機能を使用します。これにより、テンプレート内の要素への参照を取得し、操作できるようになります。

housing-list.component.html で、search という属性を追加し、先頭にハッシュタグを付けます。

<label for="location-search">Search for a new place</label>
<input id="location-search" #search><button (click)="searchHousingLocations()">Search</button>

これで、入力が参照されます。また、input の .value プロパティにもアクセスできます。

入力の値を searchHousingLocations メソッドに渡します。

<input id="location-search" #search><button (click)="searchHousingLocations(search.value)">Search</button>

これまではパラメータとして値を渡してきましたが、パラメータを使用するようにメソッドを更新しましょう。現時点では、パラメータは console.log コマンドで使用され、後で検索パラメータとして使用されます。

housing-list.component.ts に、次のコードを追加します。

 searchHousingLocations(searchText: string) {
   console.log(searchText);
 }

コードを保存して、ブラウザで Chrome DevTools を開き、[Console] タブに移動します。任意の値を入力します。[Search] を選択し、Chrome デベロッパーツールの [Console] タブに値が表示されることを確認します。

Chrome DevTools コンソールの UI からの検索テキストの一致出力

イベントハンドラが追加され、アプリがユーザーから入力を取得できるようになりました。

5. 検索結果

次のステップでは、ユーザー入力に基づいて結果を表示します。各場所には、名前、都市、都道府県、写真を表す文字列プロパティ、availableUnits を表す数値プロパティ、ランドリーと Wi-Fi を表す 2 つのブール値プロパティがあります。

name: "Location One",
city: "Chicago",
state: "IL",
photo: "/path/to/photo.jpg",
availableUnits: 4,
wifi: true,
laundry: true

このデータはプレーンな JavaScript オブジェクトとして表現できますが、Angular で TypeScript のサポートを使用することをおすすめします。タイプを使用すると、ビルド時のエラーを回避できます。

型を使用して、データの特性（データの形成と呼ばれます）を定義できます。TypeScript では、一般的にこの目的のためにインターフェースが使用されます。ここでは、住居の位置情報を表すインターフェースを作成します。エディタのターミナルで、Angular CLI を使用して HousingLocation タイプを作成します。

これを行うには、次のように入力します。

ng generate interface housing-location

housing-location.ts に、インターフェースの型の詳細を追加します。Google の設計に基づいて、各プロパティに適切なタイプを指定します。

export interface HousingLocation {
  name: string,
  city: string,
  state: string,
  photo: string,
  availableUnits: number,
  wifi: boolean,
  laundry: boolean,
}

ファイルを保存して app.component.ts を開きます。
./housing-location から住宅の位置情報のインターフェースをインポートして、住宅の場所を表すデータを含む配列を作成します。

import { HousingLocation } from './housing-location';

AppComponent クラスを更新して、HousingLocation[] 型の housingLocationList というプロパティを追加します。配列に次の値を入力します。

housingLocationList: HousingLocation[] = [
  {
    name: "Acme Fresh Start Housing",
    city: "Chicago",
    state: "IL",
    photo: "../assets/housing-1.jpg",
    availableUnits: 4,
    wifi: true,
    laundry: true,
  },
  {
    name: "A113 Transitional Housing",
    city: "Santa Monica",
    state: "CA",
    photo: "../assets/housing-2.jpg",
    availableUnits: 0,
    wifi: false,
    laundry: true,
  },
  {
    name: "Warm Beds Housing Support",
    city: "Juneau",
    state: "AK",
    photo: "../assets/housing-3.jpg",
    availableUnits: 1,
    wifi: false,
    laundry: false,
  }
];

オブジェクトを取得するためにクラスの新しいインスタンスをインスタンス化する必要はありません。インターフェースから提供される型情報を活用できます。オブジェクト内のデータは同じ形状である必要があり、インターフェースで定義されたプロパティと一致している必要があります。

データは app.component.ts に保存されますが、他のコンポーネントと共有する必要があります。解決策の 1 つは、Angular でサービスを使用することですが、アプリの複雑さを軽減するために、Angular によって提供される入力デコレータを使用します。入力デコレータを使用すると、コンポーネントでテンプレートから値を受け取ることができます。これを使用して、housingLocationList 配列を HousingListComponent と共有します。

housing-list.component.ts で、@angular/core から input をインポートし、./housingLocation から HousingLocation をインポートします。

import { Component, OnInit, Input } from '@angular/core';
import {HousingLocation } from '../housing-location';

コンポーネントクラスの本文に locationList というプロパティを作成します。Input を locationList のデコレータとして使用します。

export class HousingListComponent implements OnInit {

  @Input() locationList: HousingLocation[] = [];
  ...
}

このプロパティの型は HousingLocation[] に設定されています。

app.component.html で、app-housing-list 要素を更新して locationList という属性を追加し、値を housingLocationList に設定します。

<main>
 ...
 <app-housing-list [locationList]="housingLocationList"></app-housing-list>
</main>

locationList 属性は角かっこ（[ ]）で囲む必要があります。これにより、Angular で locationList プロパティの値を変数または式に動的にバインドできます。そうでない場合、Angular では等号の右側の値が文字列として扱われます。

この時点でエラーが発生した場合は、次の点を確認してください。

入力属性名のスペルは、TypeScript クラスのプロパティのスペルと一致します。ケースも同様に重要です。
等号の右側のプロパティ名が正しく入力されている。
入力プロパティは角かっこで囲まれています。

データ共有の設定が完了しました。次のステップでは、結果をブラウザに表示します。データは配列形式なので、データをループさせてテンプレートの要素（*ngFor）を繰り返すことができる Angular 機能を使用する必要があります。

housing-list.component.html で、*ngFor を使用するようにテンプレートの記事要素を更新し、配列エントリをブラウザに表示できるようにします。

<article *ngFor="let location of locationList"></article>

ngFor 属性に割り当てる値は、Angular テンプレートの構文です。テンプレートにローカル変数を作成します。Angular では、article 要素のスコープ内で、開始タグと終了タグの間にローカル変数を使用します。

ngFor とテンプレートの構文について詳しくは、Angular ドキュメントをご覧ください。

ngFor は、locationList 配列のエントリごとに記事要素を繰り返します。次に、地域変数の値を表示します。

テンプレートを更新して、段落要素（<p>）を追加します。段落要素の子は、location プロパティからの補間値です。

<input #search><button (click)="searchHousingLocations(search.value)">Search</button>
<article *ngFor="let location of locationList">
   <p>{{location.name}}</p>
</article>

Angular テンプレートでテキスト補間を使用すると、二重中括弧（{{ }}）構文の値を表示できます。

保存してブラウザに戻ります。これで、アプリは locationList 配列内の配列エントリごとに 1 つのラベルを表示するようになります。

3 か所の住宅地のリスティング

データはアプリコンポーネントから住宅リストコンポーネントに対して共有され、それぞれの値を反復処理してブラウザに表示します。

コンポーネント間でデータを共有する方法を紹介し、新しいテンプレート構文と ngFor ディレクティブを使用しました。

6. 検索結果を絞り込む

現在のところ、アプリではユーザーの検索に基づく結果ではなく、すべての検索結果が表示されています。これを変更するには、HousingListComponent を更新して、アプリが意図したとおりに機能するようにします。

housing-list.component.ts で、HousingListComponent を更新し、results という新しいプロパティを HousingLocation[] 型にします。

export class HousingListComponent implements OnInit {

 @Input() locationList: HousingLocation[] = [];
 results: HousingLocation[] = [];
 ...

results 配列は、ユーザーの検索に一致する居住地を表します。次のステップでは、値をフィルタするように searchHousingLocations メソッドを更新します。

console.log を削除し、searchText でフィルタリングした locationList のフィルタリングの出力に results プロパティを割り当てるようにコードを更新します。

searchHousingLocations(searchText: string) {
  this.results = this.locationList.filter(
  (location: HousingLocation) => location.city
    .toLowerCase()
    .includes(
        searchText.toLowerCase()
  ));
}

このコードでは、配列フィルタメソッドを使用し、searchText を含む値のみを受け入れています。すべての値が小文字の文字列で比較されます。

次の 2 つの点にご注意ください。

メソッド内でクラスのプロパティを参照する場合は、this 接頭辞を使用する必要があります。そのため、this.results と this.locationList を使用しています。
検索機能は場所の都市のプロパティにのみ一致しますが、コードを更新してプロパティをさらに追加できます。

このコードはそのまま使用できますが、改善できます。

searchText が空の場合に配列を検索しないように、コードを更新します。

searchHousingLocations(searchText: string) {
  if (!searchText) return;
  ...
}

メソッドが更新され、テンプレートが変更されました。結果をブラウザに表示する前に、テンプレートを変更する必要があります。

housing-location.component.html で、ngFor の locationList を results に置き換えます。

<article *ngFor="let location of results">...</article>

コードを保存してブラウザに戻ります。入力を使用して、サンプルデータ（シカゴなど）から場所を検索します。

一致する結果のみが表示されます。

検索フィールドに入力したテキストに一致する検索結果

ユーザー入力と検索結果をリンクするために必要な追加機能が完成しました。アプリの準備はほぼ完了です。

次に、アプリの詳細を表示して終了します。

7. 詳細を表示する

アプリが検索結果をクリックし、詳細パネルに情報を表示できるようにする必要があります。HousingListComponent は、データがそのコンポーネントに表示された後にどの結果がクリックされたかを認識します。HousingListComponent から親コンポーネント AppComponent にデータを共有する方法が必要です。

Angular では、@Input() では親から子にデータが送信され、@Output() ではコンポーネントから子に親のコンポーネントにイベントが送信されます。出力デコレータでは、EventEmitter を使用してイベントを任意のリスナーに通知します。ここでは、検索結果のクリックを表すイベントを発行します。選択イベントとともに、選択したアイテムをペイロードの一部として送信する必要があります。

housing-list.component.ts で、import を更新して、その場所の @angular/core と HousingLocation の Output と EventEmitter を含めます。

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { HousingLocation } from '../housing-location';

HousingListComponent の本体でコードを更新し、EventEmitter<HousingLocation>(); 型の locationSelectedEvent という新しいプロパティを追加します。

@Output() locationSelectedEvent = new EventEmitter<HousingLocation>();

locationSelectedEvent プロパティは @Output() で装飾されているため、このコンポーネントの API の一部となっています。EventEmitter では、クラスにジェネリック API を利用して、タイプ HousingLocation を提供します。locationSelectedEvent によってイベントが発行された場合、イベントのリスナーは、付随するデータが HousingLocation 型になると想定できます。これは、開発を支援し、エラーの可能性を減らすための型安全性です。

ユーザーがリストから場所をクリックするたびに、locationSelectedEvent をトリガーする必要があります。

HousingListComponent を更新して、パラメータとして housingLocation 型の値を受け入れる selectLocation という新しいメソッドを追加します。

selectHousingLocation(location: HousingLocation) { }

メソッドの本文で、locationSelectedEvent エミッターから新しいイベントを発行します。出力される値は、ユーザーが選択した場所です。

selectHousingLocation(location: HousingLocation) {
  this.locationSelectedEvent.emit(location);
}

これをテンプレートにリンクしましょう。

housing-list-component.html で、記事要素の click event を持つ新しいボタン子を更新します。このイベントは、TypeScript クラスの selectHousingLocation メソッドを呼び出して、クリックされた location への参照を引数として渡します。

<article *ngFor="let location of results" >
  <p>{{location.name}}</p>
  <button (click)="selectHousingLocation(location)">View</button>
</article>

ハウジングの場所にはクリック可能なボタンが追加され、コンポーネントに値を戻すことができるようになりました。

このプロセスの最後のステップは、AppComponent を更新してイベントをリッスンし、それに応じてディスプレイを更新することです。

app.component.html で、locationSelectedEvent をリッスンし、updateSelectedLocation メソッドでイベントを処理するように app-housing-list 要素を更新します。

<app-housing-list [locationList]="housingLocationList" (locationSelectedEvent)="updateSelectedLocation($event)"></app-housing-list>

$event は、テンプレートでイベントハンドラを処理するときに、Angular によって提供されます。$event 引数は HousingLocation 型のオブジェクトです。これが EventEmitter の型パラメータを設定しているためです。Angular ですべてが自動的に処理されます。テンプレートが正しいことをご確認ください。

app.component.ts でコードを更新し、HousingLocation | undefined 型の selectedLocation という新しいプロパティを追加します。

selectedLocation: HousingLocation | undefined;

これは、Union Type という TypeScript 機能を使用します。共用体を使用すると、変数は複数の型のいずれかを受け入れることができます。今回は selectedLocation のデフォルト値を指定していないため、selectedLocation の値は HousingLocation または undefined になります。

updateSelectedLocation を実装する必要があります。

updateSelection という新しいメソッドを追加します。これは location というパラメータで、型は HousingLocation です。

updateSelectedLocation(location: HousingLocation) { } searchHousingLocations() {}

メソッドの本体で、selectedLocation の値を location パラメータに設定します。

updateSelectedLocation(location: HousingLocation) {
  this.selectedLocation = location;
}

この手順を完了したら、最後のステップとして、選択した場所を表示するようにテンプレートを更新します。

app.component.html に新しい <article> 要素を追加して、選択したビジネスのプロパティを表示します。次のコードでテンプレートを更新します。

<article>
  <img [src]="selectedLocation?.photo">
  <p>{{selectedLocation?.name}}</p>
  <p>{{selectedLocation?.availableUnits}}</p>
  <p>{{selectedLocation?.city}}, {{selectedLocation?.state}}</p>
  <p>{{selectedLocation?.laundry ? "Has laundry" : "Does Not have laundry"}}</p>
  <p>{{selectedLocation?.wifi ? "Has wifi" : "Does Not have wifi"}}</p>
 </article>

selectedLocation は undefined であるため、オプションのチェーン演算子を使用してプロパティから値を取得します。また、wifi と laundry のブール値に 3 項構文も使用しています。これにより、値に応じてカスタムメッセージを表示できます。

コードを保存して、ブラウザを確認します。場所を検索し、クリックして詳細を表示します。

2 列レイアウト、左側に検索結果、右側に選択した場所の詳細

問題はないようですが、解決すべき問題が残っています。最初にページが読み込まれる際、詳細パネルには表示したくないテキストアーティファクトがあります。Angular では、次のステップで使用するコンテンツを条件付きで表示できます。

画面にアーティファクトが正しく表示されないデフォルトの UI

いよいよ、アプリが進化していきました。これまでに実装したことは次のとおりです。

出力デコレータと EventEmitter を使用して、子コンポーネントから親コンポーネントにデータを共有できます。
ユーザーによる値の入力と、その値を使用した検索も正常に許可しました。
アプリに検索結果が表示され、ユーザーがクリックすると詳細を確認できます。

これまでのところ、これは非常に良い対応です。テンプレートを更新して、アプリを完成させましょう。

8. テンプレートを洗練する

UI には現在、条件付きで表示する詳細パネルからのテキストアーティファクトが含まれています。ここでは、ng-container と *ngIf の 2 つの Angular 機能を使用します。

ngIf ディレクティブを article 要素に直接適用すると、ユーザーが最初の選択を行ったときにレイアウトシフトが発生します。このエクスペリエンスを向上させるには、article の子である別の要素に位置情報の詳細をラップします。この要素はスタイル設定も機能も持っていません。単に DOM に重みを追加します。これを回避するには、ng-container を使用します。ディレクティブを適用することはできますが、最終的な DOM には表示されません。

app.component.html で、次のコードに合わせて article 要素を更新します。

<article>
  <ng-container>
  <img [src]="selectedLocation?.photo">
  <p>{{selectedLocation?.name}}</p>
  <p>{{selectedLocation?.city}}, {{selectedLocation?.state}}</p>
  <p>Available Units: {{selectedLocation?.availableUnits}}</p>
  <p>{{selectedLocation?.laundry ? "Has laundry" : "Does Not have laundry"}}</p>
  <p>{{selectedLocation?.wifi ? "Has wifi" : "Does Not have wifi"}}</p>
  </ng-container>
</article>

次に、*ngIf 属性を ng-container 要素に追加します。この値は selectedLocation にする必要があります。

<article>
  <ng-container *ngIf="selectedLocation">
  ...
  </ng-container>
</article>

selectedLocation が Truthy の場合にのみ、アプリが ng-container 要素のコンテンツを表示するようになりました。

このコードを保存し、ページの読み込み時にブラウザでテキストアーティファクトが表示されなくなることを確認します。

このアプリに最後にもう 1 つ変更を加えることができます。housing-location.component.html の検索結果には詳細情報が表示されます。

housing-location.component.html で、コードを次のように更新します。

<label for="location-search">Search for a new place</label>
<input id="location-search" #search placeholder="Ex: Chicago"><button
    (click)="searchHousingLocations(search.value)">Search</button>
<article *ngFor="let location of results" (click)="selectHousingLocation(location)">
  <img [src]="location.photo" [alt]="location.name">
  <p>{{location.name}}</p>
  <p>{{location.city}}, {{location.state}}</p>
  <button (click)="selectHousingLocation(location)">View</button>
</article>

コードを保存してブラウザに戻り、完成したアプリを表示します。

2 列のアプリケーション: 左側には検索結果が表示され、右側には選択した検索結果の詳細が表示されます。

アプリは見た目も機能も完全です。よくできました。

9. 完了

この度は Angular を使用してフェアハウスを制作し、ありがとうございました。

Angular を使用してユーザーインターフェースを作成しました。Angular CLI を使用して、コンポーネントとインターフェースを作成しました。次に、Angular の強力なテンプレート機能を使用して、画像の表示、イベントの処理などを行う機能的なアプリを作成しました。

次のステップ

機能の構築を続ける場合は、以下の方法をお試しください。

データはアプリにハードコードされている。大きなリファクタリングは、データを格納するサービスを追加することです。
現在、詳細ページは同じページに表示されますが、詳細をそれぞれのページに移動して、Angular ルーティングを活用することをおすすめします。
もう 1 つの更新は、保存エンドポイントでデータをホストし、Angular の HTTP パッケージを使用して実行時にデータを読み込むことです。

楽しい機会はたくさんあります。