Angular4で編集機能を作る｜AngularでWebサイト作成

ntuti

Angular4で編集機能を作る｜AngularでWebサイト作成

Angularの学習の為に、AngularでWebサイトを作ってみることにしました（Angularのバージョンは4.3.6です）。
適宜作業内容をまとめていきます。

基本的な部分は公式チュートリアルなどを参考にしながら進めています。

今回は前回作成し詳細画面で編集ができるようにしていきます。

開発環境

・OS：Windows8.1 64bit
・node：v7.2.1
・npm：4.0.5
・Angular：4.3.6
・開発ツール：VisualStudioCode

手順

手順1.詳細テンプレートの編集

HTMLテンプレートを編集できるように修正します。

<h1>ユーザ詳細</h1>
<div id="contents" *ngIf="user">
  <div id="detail-form">
    <div>
      <table class="table">
        <tr>
          <th>名前: </th>
          <td>
            <input [(ngModel)]="user.name" class="form-control" placeholder="ユーザ名">
          </td>
        </tr>
        <tr>
          <td colspan="2" style="text-align:center;">
            <button class="btn btn-primary" (click)="goBack()">戻る</button>&nbsp;&nbsp;
            <button class="btn btn-success" (click)="save()">保存</button>
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>

手順2.saveメソッドをcomponentに追加

user.component.tsを以下の様に追加編集

export class UserComponent implements OnInit {
  ～省略～
  user: User;

  constructor(
    private userservice: UserService,
    ～省略～
  ) { }

  goBack(): void {
    this.location.back();
  }
  
  save(): void {
    this.userservice.update(this.user).then(() => this.goBack());
  }
  ～省略～

手順3.確認（サーバ側で要設定）

編集の例も一覧・詳細表示や削除処理同様に、実際はサーバ側でAPIを用意しなければなりませんが、用意できたらブラウザからリクエストすれば編集処理が実行できるはずです。
（ただし、別サーバへリクエストを投げる場合はCORS（Cross Origin Resource Sharing）対応をしておく必要があります）。

感想

今回は編集用のコンポーネントを作成しました。ここまででCRUD（登録・参照・更新・削除）の画面が完成しました。
しかし、毎度書いているように、これをちゃんと動かすには、サーバ側のAPI実装が必要になってきます。
サーバ側のAPIを実装するのは手間が多いため、モック用に擬似的にJSON形式のレスポンスを返すことのできるライブラリがAngularには用意されています。次回はこのライブラリの使用方法を見ていきたいと思います。