一覧・詳細ページを作る｜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コンポーネントを作成します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | import { Component, OnInit } from '@angular/core';import { User} from './user' //←Userクラスを使えるようにimportimport { UserService } from './user.service' //←UserServiceを使えるようにimportimport { 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テンプレートを編集します。
1 2 3 4 5 6 7 8 9 10 11 | <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コンポーネントを作成します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | 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テンプレートを編集します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <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を行い、
1 2 | import { UserComponent } from './user/user.component';import { UserlistComponent } from './user/userlist.component'; |
declarationsに追加。
1 2 3 4 5 | @NgModule({ declarations: [ UserComponent, UserListComponent,～省略～ |
手順4.Routingに追加
app-routing.module.tsのRoutesに追加
1 2 3 4 5 6 7 8 9 10 11 12 | const routes: Routes = [ ～省略～ { path: 'user/list', component: UserlistComponent }, { path: 'user', component: UserComponent }, ～省略～] |
手順5.確認（サーバ側で要設定）
実際はサーバ側でAPIを用意しなければなりませんが、用意できたらブラウザからリクエストすれば表示されるはずです
（ただし、別サーバへリクエストを投げる場合はCORS（Cross Origin Resource Sharing）対応をしておく必要があります）。
感想
今回は一覧・詳細表示用のコンポーネントを作成しました。
次回は削除用のメソッドを追加していきます。
WEBアプリケーション関連 人気連載リンク
基礎からPHPWEBアプリ解発を学ぶなら・・
PHP基礎 連載
より実践的なWEBアプリ開発講座！Bootstrap活用を学ぶなら・・
魁！小野の塾 連載
