Angular 4入門 09: HTTPサービスでデータを追加・削除する

<h2>ヒロインたち</h2>
<div>
	<label>ヒロイン名:</label> <input #heroineName />
	<button (click)="add(heroineName.value); heroineName.value=''">
		追加
	</button>
</div>
<ul class="heroines">
	<li *ngFor="let heroine of heroines"
			[class.selected]="heroine === selectedHeroine"
			(click)="onSelect(heroine)">
		<span class="badge">{{heroine.id}}</span>
		<span>{{heroine.name}}</span>
	</li>
</ul>
<div *ngIf="selectedHeroine">
	<h2>
		ヒロイン「{{selectedHeroine.name}}」
	</h2>
	<button (click)="gotoDetail()">詳細を見る</button>
</div>

import {Component, OnInit} from '@angular/core';
import {Router} from '@angular/router';
import {Heroine} from './heroine';
import {HeroineService} from './heroine.service';
@Component({
	moduleId: module.id,
	selector: 'my-heroines',
	templateUrl: 'heroines.component.html',
	styleUrls: ['heroines.component.css']
})
export class HeroinesComponent implements OnInit {
	heroines: Heroine[];
	selectedHeroine: Heroine;
	constructor(
		private router: Router,
		private heroineService: HeroineService
	) {}
	onSelect(heroine: Heroine): void {
		this.selectedHeroine = heroine;
	}
	getHeroines(): void {
		this.heroineService.getHeroines().then((heroines: Heroine[]) => this.heroines = heroines);
	}
	add(name: string): void {
		name = name.trim();
		if (!name) {return;}
		this.heroineService.create(name)
			.then((heroine: Heroine) => {
				this.heroines.push(heroine);
				this.selectedHeroine = null;
		});
	}
	ngOnInit(): void {
		this.getHeroines();
	}
	gotoDetail(): void {
		this.router.navigate(['/detail', this.selectedHeroine.id]);
	}
}

import {Injectable} from '@angular/core';
import {Headers, Http, Response} from '@angular/http';
import 'rxjs/add/operator/toPromise';
import {Heroine} from './heroine';
@Injectable()
export class HeroineService {
	private headers: Headers = new Headers({'Content-Type': 'application/json'});
	private heroinesUrl: string = 'api/heroines';
	constructor(private http: Http) {}
	getHeroines(): Promise<Heroine[]> {
		return this.http.get(this.heroinesUrl)
			.toPromise()
			.then((response: Response) => response.json().data as Heroine[])
			.catch(this.handleError);
	}
	getHeroine(id: number): Promise<Heroine> {
		const url: string = `${this.heroinesUrl}/${id}`;
		return this.http.get(url)
			.toPromise()
			.then((response: Response) => response.json().data as Heroine)
			.catch(this.handleError);
	}
	create(name: string): Promise<Heroine> {
		return this.http
			.post(this.heroinesUrl, JSON.stringify({name: name}), {headers: this.headers})
			.toPromise()
			.then((response: Response) => response.json().data)
			.catch(this.handleError);
	}
	update(heroine: Heroine): Promise<Heroine> {
		const url: string = `${this.heroinesUrl}/${heroine.id}`;
		return this.http
			.put(url, JSON.stringify(heroine), {headers: this.headers})
			.toPromise()
			.then(() => heroine)
			.catch(this.handleError);
	}
	private handleError(error: any): Promise<any> {
		console.error('An error occured', error);
		return Promise.reject(error.message || error);
	}
}

<h2>ヒロインたち</h2>
<div>
	<label>ヒロイン名:</label> <input #heroineName />
	<button (click)="add(heroineName.value); heroineName.value=''">
		追加
	</button>
</div>
<ul class="heroines">
	<li *ngFor="let heroine of heroines"
			[class.selected]="heroine === selectedHeroine"
			(click)="onSelect(heroine)">
		<span class="badge">{{heroine.id}}</span>
		<span>{{heroine.name}}</span>
		<button class="delete"
			(click)="delete(heroine); $event.stopPropagation()">x</button>
	</li>
</ul>
<div *ngIf="selectedHeroine">
	<h2>
		ヒロイン「{{selectedHeroine.name}}」
	</h2>
	<button (click)="gotoDetail()">詳細を見る</button>
</div>

import {Component, OnInit} from '@angular/core';
import {Router} from '@angular/router';
import {Heroine} from './heroine';
import {HeroineService} from './heroine.service';
@Component({
	moduleId: module.id,
	selector: 'my-heroines',
	templateUrl: 'heroines.component.html',
	styleUrls: ['heroines.component.css']
})
export class HeroinesComponent implements OnInit {
	heroines: Heroine[];
	selectedHeroine: Heroine;
	constructor(
		private router: Router,
		private heroineService: HeroineService
	) {}
	onSelect(heroine: Heroine): void {
		this.selectedHeroine = heroine;
	}
	getHeroines(): void {
		this.heroineService.getHeroines().then((heroines: Heroine[]) => this.heroines = heroines);
	}
	add(name: string): void {
		name = name.trim();
		if (!name) {return;}
		this.heroineService.create(name)
			.then((heroine: Heroine) => {
				this.heroines.push(heroine);
				this.selectedHeroine = null;
		});
	}
	delete(heroine: Heroine): void {
		this.heroineService
			.delete(heroine.id)
			.then(() => {
				this.heroines = this.heroines.filter((_heroine: Heroine) => _heroine !== heroine);
				if (this.selectedHeroine === heroine) {
					this.selectedHeroine = null;
				}
			});
	}
	ngOnInit(): void {
		this.getHeroines();
	}
	gotoDetail(): void {
		this.router.navigate(['/detail', this.selectedHeroine.id]);
	}
}

.selected {
	background-color: #CFD8DC !important;
	color: white;
}
.heroines {
	margin: 0 0 2em 0;
	list-style-type: none;
	padding: 0;
	width: 15em;
}
.heroines li {
	cursor: pointer;
	position: relative;
	left: 0;
	background-color: #EEE;
	margin: 0.5em;
	padding: 0.3em 0;
	height: 1.6em;
	border-radius: 4px;
}
.heroines li.selected:hover {
	background-color: #BBD8DC !important;
	color: white;
}
.heroines li:hover {
	color: #607D8B;
	background-color: #DDD;
	left: 0.1em;
}
.heroines .text {
	position: relative;
	top: -3px;
}
.heroines .badge {
	display: inline-block;
	font-size: small;
	color: white;
	padding: 0.8em 0.7em 0 0.7em;
	background-color: #607D8B;
	line-height: 1em;
	position: relative;
	left: -1px;
	top: -4px;
	height: 1.8em;
	margin-right: .8em;
	border-radius: 4px 0 0 4px;
}
button.delete {
	float:right;
	margin-top: 2px;
	margin-right: .8em;
	background-color: gray !important;
	color:white;
}

import {Injectable} from '@angular/core';
import {Headers, Http, Response} from '@angular/http';
import 'rxjs/add/operator/toPromise';
import {Heroine} from './heroine';
@Injectable()
export class HeroineService {
	private headers: Headers = new Headers({'Content-Type': 'application/json'});
	private heroinesUrl: string = 'api/heroines';
	constructor(private http: Http) {}
	getHeroines(): Promise<Heroine[]> {
		return this.http.get(this.heroinesUrl)
			.toPromise()
			.then((response: Response) => response.json().data as Heroine[])
			.catch(this.handleError);
	}
	getHeroine(id: number): Promise<Heroine> {
		const url: string = `${this.heroinesUrl}/${id}`;
		return this.http.get(url)
			.toPromise()
			.then((response: Response) => response.json().data as Heroine)
			.catch(this.handleError);
	}
	create(name: string): Promise<Heroine> {
		return this.http
			.post(this.heroinesUrl, JSON.stringify({name: name}), {headers: this.headers})
			.toPromise()
			.then((response: Response) => response.json().data)
			.catch(this.handleError);
	}
	delete(id: number): Promise<void> {
		const url = `${this.heroinesUrl}/${id}`;
		return this.http.delete(url, {headers: this.headers})
			.toPromise()
			.then(() => null)
			.catch(this.handleError);
	}
	update(heroine: Heroine): Promise<Heroine> {
		const url: string = `${this.heroinesUrl}/${heroine.id}`;
		return this.http
			.put(url, JSON.stringify(heroine), {headers: this.headers})
			.toPromise()
			.then(() => heroine)
			.catch(this.handleError);
	}
	private handleError(error: any): Promise<any> {
		console.error('An error occured', error);
		return Promise.reject(error.message || error);
	}
}