一覧・詳細ページを作る｜AngularでWebサイト作成

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

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

今回は前回作成したServiceをコンポーネントで使い、一覧・詳細表示コンポーネントの作成を行っていきます。

開発環境

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

手順

手順1.一覧表示用コンポーネントの編集

Userlistコンポーネントを作成します。

import { Component, OnInit } from '@angular/core';
import { User} from './user' //←Userクラスを使えるようにimport
import { UserService } from './user.service' //←UserServiceを使えるようにimport
import { Http, HttpModule } from '@angular/http'

@Component({
    selector: 'app-userlist', //←セレクタ名
    templateUrl: './userlist.component.html', //←テンプレートファイル指定
    // styleUrls: ['./userlist.component.css'] //←CSSファイル指定（一旦省略）
})
export class UserListComponent implements OnInit {
    users: User[]

    constructor(
        private userService: UserService //←UserServiceをinject
    ) { }
    ngOnInit() { //←Initは初期化時に実行されるメソッド
        this.getUsers()  //←User一覧取得メソッドを呼び出し
    }
    //User一覧取得メソッド
    getUsers(): void {
        //UserServiceオブジェクトのgetUsersメソッドを実行
        this.userService.getUsers().then((users: User[]) => this.users = users);
    }
}

HTMLテンプレートを編集します。

<h1>ユーザ一覧</h1>
<table id="contents" class="table">
    <tr>
        <th>ID</th>
        <th>ユーザ名</th>
    </tr>
    <tr *ngFor="let user of users">
        <td>{{user.id}}</td>
        <td><a [routerLink]="['/user', user.id]">{{user.name}}</a></td>
    </tr>
</table>

手順2.詳細表示用コンポーネントの編集

Userコンポーネントを作成します。

import { Component, OnInit, /*Input*/ } from '@angular/core';
import { User } from './user'
import { UserService } from './user.service'
import {ActivatedRoute, Params} from '@angular/router';
import {Location} from '@angular/common';
import 'rxjs/add/operator/switchMap';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html', //←テンプレートファイル指定
  //styleUrls: ['./user.component.css'] //←CSSファイル指定（一旦省略）
})
export class UserComponent implements OnInit {
  user: User;

  constructor(
    private userservice: UserService,
    private route: ActivatedRoute,
    private location: Location,
  ) { }
  ngOnInit() {
    this.route.params
    .switchMap((params: Params) => this.userservice.getUser(+params['id']))
    .subscribe((user: User) => this.user= user);  //←パラメータのid値を基にUser詳細取得メソッドを呼び出し
  }
}

HTMLテンプレートを編集します。

<h1>部門詳細</h1>
<div id="contents" *ngIf="user">
  <div class="row cell">
    <div class="col-md-2">
      <label>ユーザID: </label> 
    </div>
    <div class="col-md-2 cell">
      {{user.id}}
    </div>
  </div>
  <div class="row cell">
    <div class="col-md-2">
      <label>ユーザ名: </label>
    </div>
    <div class="col-md-2 cell">
      <input [(ngModel)]="user.name" placeholder="ユーザ名">
    </div>
  </div>
</div>

手順3.AppModuleにコンポーネントを追加

importを行い、

import { UserComponent } from './user/user.component';
import { UserlistComponent } from './user/userlist.component';

declarationsに追加。

@NgModule({
  declarations: [
    UserComponent,
    UserListComponent,
～省略～

手順4.Routingに追加

app-routing.module.tsのRoutesに追加

const routes: Routes = [
    ～省略～
    {
        path: 'user/list',
        component: UserlistComponent
    },
    {
        path: 'user',
        component: UserComponent
    },
    ～省略～
]

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

実際はサーバ側でAPIを用意しなければなりませんが、用意できたらブラウザからリクエストすれば表示されるはずです
（ただし、別サーバへリクエストを投げる場合はCORS（Cross Origin Resource Sharing）対応をしておく必要があります）。

感想

今回は一覧・詳細表示用のコンポーネントを作成しました。
次回は削除用のメソッドを追加していきます。

WEBアプリケーション関連 人気連載リンク

基礎からPHPWEBアプリ解発を学ぶなら・・
PHP基礎 連載

より実践的なWEBアプリ開発講座！Bootstrap活用を学ぶなら・・
魁！小野の塾 連載