TypeScript でつくるシングノレベージアプリケーション this. articIeService. update(this. article. id, this. article) . subscribe( ProcessingM0daIAction. setProcessingFlag(true) ; updateButtonCIicked() : void { this. article. body ニ (event. target as HTMLInputElement) . value, b0dyChanged (event : Event) : vo i d { (event. target as HTMLInputEl ement) . val ue , th i s. art i c 尾 . t i t 尾 t i t IeChanged (event : Event) : vo i d { ProcessingM0daIAction. setProcessingFlag(false) ; th i s. art i 引 e = art i 引 es [ 0 ] , ProcessingM0daIAction. setProcessingFlag(false) : toastr. error(errorMessage) , private onError(errorMessage: string) : void { ProcessingM0dalAction. setProcessingFlag(false) ; true, this. isCompIeted = toastr. success(' 更新完了 ' ) : private onUpdateArticIe() : void { this. onError. bind(this)); this. onUpdateArticIe. bind(this), this. isProcessing = currentAppState. isprocessing, currentAppState : AppState) : vo i d { pr i vate onChangeAppState (eventName : str i ng, beforeAppState. AppState, リスト 4.3.9.4.2 cli ent/app/components/update-art icle. component. html 58 ーく div *nglf="! isCompleted" class="u-full-width"> ーく h2 > 記事の更新く / h2 > ーく /p> く a [routerLink]="[' / ' ] " 〉もどるく / a > ーく p>

TypeScript でつくるシングルページアプリケーション —webk i t—an i mat i on : sp i n 1 s i nf i n i te ⅱ nea r , w i dth : 50px : pointer—events:none; POS i t i on : re ー at i ve , top: calc(50vh ー 15px) : text-align:center, margin . 0 autO, he i ght : 50px , border-right-color: transparent, —ms—an i mat i on. sp i n 1 S i nf i n i ⅱ nea r , —moz—an i mat i on : sp i n 1 S i nf i n i ⅱ nea r , 4.3.9.2 article-list. component リスト 4.3.9.2. 1 client/app/components/article-list. component. ts . /actions/ProcessingM0daIAction { ProcessingM0dalAction } from . /actions/ArticIeAction' { ArticleAction } from . /m0deIs/RegisteredArticle' { RegisteredArticle } from . /model s/AppState { AppState } from . /services/ArticleService { ArticIeService } from . /common/AppStore' { AppStore } from import * as toastr from toastr { Component, 0nInit, 0nDestroy, ElementRef } from ' @angular/core import import import import import import import export class ArticleListComponent implements Onlnit, .Com/onent ( { article—list' selector . providers: [ArticleService], . /article—list. component. html' templ ateUr に private htmlElement: HTMLElement, articles: RegisteredArticle[], isProcessing: boolean, constructor ( private elementRef: ElementRef, private articleService: ArticleService, this. isProcessing = false, 51 this. htmlElement = this. eIementRef. nativeElement, OnDestroy {

TypeScript でつくるシングルページアプリケーション .Com/onent ( { update—art i 引 e—page selector . providers: [ ArticleService ] , . /update—art i c 尾 . component. html tempIateUr に styIeUrIs: [ ' . /update-article. component. css' ] export class UpdateArticleComponent implements Onlnit, i sCompl eted : b0 引 ean , isProcessing: boolean, article: RegisteredArticle, constructor ( pr ivate activeRoute. ActivatedRoute, private articleService: ArticleService ngOn I n i t ( ) : vo i d { this. isProcessing = false, OnDestroy { th i s. onChangeAppState = th i s. onChangeAppState. b i nd ()h i s) ; AppStore. getlnstance() . registerHandler ( ' CHANGE' th i s. onChangeAppState) ; this. readArticle(); ng0nDestroy ( ) : vo i d { AppStore. getl nstance ( ) . removeHandl er ( ' CHANGE' private readArticle() : void { ProcessingM0daIAction. setProcessingFlag(true) ; this. activeRoute. params . subscr ibe((param) = > { th i s. onChangeAppState) ; private onReadArticles(articles: RegisteredArticle[]) : void { if (articles.length = throw new RangeError ( ' 指定された記事が見つかりません ' ) ; this. articleService. findArticleBYld(Number. parselnt(param. id, subscribe( this. onReadArticles. bind(this), this. onError. bind(this) 57 10 ) )

TypeScript でつくるシングルページアプリケーション ProcessingM0daIAction. setProcessingFlag(false) ; リスト 4.3. 9. 5.2 c ⅱ ent/app/components/v i ew-artic 尾 . component. html <div *nglf="article" class="u-full-width"> く h2 > { { art i c 尾 . t i t 尾 } } く / h2 > く d i v> く p class="u-full-width article—body">{{ article. b0dY }} く /p> </d i v> く /d i v> リスト 4.3. 9. 5.3 client/app/components/view—article. component. css article—body { white—space: pre—wrap, 4.3.10 サーヒスクラスの作成 く a [routerLink]="[' / ' ] " > もどるく / a > コンポーネントを作成したら、次にサービスクラスを作成します。フロントエンドのサービスク ラスの役割は、主にサーバーサイドとの通信です。 リスト 4.3. 10. 1 client/app/services/ArticleService. ts import { lnjectable } from '@angular/core' , import { Headers, Http, RequestOptions, Response } from ' @angular/http import * as Rx from rx 」 s import { Config } from import { Article } from @lnjectable() export class ArticleService { . /Conf i g' . /models/Article" a rt i c 尾 private static readonly A 円 * コンストラクタ 61

TypeScript でつくるシングルページアプリケーション article: RegisteredArticIe, . /services/ArticleService . /m0dels/RegisteredArticIe' . /act i ons/Process i ngModalAct i on constructor (private activeRoute: ActivatedRoute, pr ivate articIeService. export class ViewArticleComponent implements 0nInit { styIeUrls: [ ' . /view-article. component. css' ] templ ateUr に . /v i ew-art i c 尾 . component. html providers: [ArticIeService], view—article—page selector . .Com/onent ( { import { ArticIeService } from import { RegisteredArticle } from import { ProcessingModalAction } from import * as toastr from toastr import { ActivatedRoute } from ' @angular/router import { Component, OnInit } from ' @angular/core ArticleService) { ngOn I n i t ( ) : vo i d { this. readArticIe(); private readArticle() : void { ProcessingM0daIAction. setProcessingFlag(true) ; this. activeRoute. params . subscribe((param) = > { this. articIeService. findArticleById(Number. parselnt(param. id, . subscr ibe( this. onReadArticIes. bind(this), this. onError. bind(this) private onReadArticIes(articIes: RegisteredArticle[]) : void { if (articles.length = throw new RangeError ( ' 指定された記事が見つかりません ' ) ; th i s. art i 引 e = art i 引 es [ 0 ] , ProcessingModalAction. setProcessingFlag(false) : private onError (errorMessage: string) : void { toastr. error (errorMessage) ; 60 10 ) )

TypeScript でつくるシングルページアプリケーション ng0n I n i t ( ) : vo i d { th i s. onChangeAppState = th i s. onChangeAppState. b i nd ()h i s) ; AppStore. getlnstance() . registerHandIer ( ' CHANGE' th i s. onChangeAppState) ; this. updateArticIeList() ; ngOnDestroy ( ) : vo i d { AppStore. getlnstance ( ) . removeHand ler ( ' CHANGE' , th i s. onChangeAppState) : deleteButtonClicked(articleId: number) : void { ProcessingModaIAction. setProcessingFlag(true) ; this. articleService. delete(articleld) . subscribe( this. onDeIeteArticIe. bind(this), this. onError. bind(this)) ; private updateArticIeList() : void { ProcessingM0dalAction. setProcessingFlag(true) : this. articleService . f i ndA Ⅱ Art i c les ( ) . subscribe( th i s. onF i ndArt i c 尾 s. b i nd ()h i s) , this. onError. bind(this)) ; pr i vate onChangeAppState (eventName. str i ng, beforeAppState : AppState, currentAppState : AppState) { this. articles ニ currentAppState. articles, this. isProcessing = currentAppState. isProcessing, private onFindArticIes(registerdArticIes: RegisteredArticle ロ ) : void { ArticIeAction. change(registerdArticles) ; ProcessingModaIAction. setProcessingFlag(false) ; private onDeleteArticIe() : void { toastr. success(' 削除完了 ' ) ; this. updateArticIeList() ; private onError (errorMessage. string) : void { toastr. error (errorMessage) : ProcessingModaIAction. setProcessingFlag(false) ; 52

TypeScript でつくるシングルページアプリケーション this. articIeService. create(this. article) . subscribe( ProcessingModalAction. setProcessingFlag(true) ; registerButtonCIicked() : void { this. article. bOdy = (event. target as HTMLInputElement) . value, bodyChanged (event : Event) : vo i d { th i s. art i c 尾 . t i t 尾 (event. target as HTMLlnputEl ement) . val ue , this. onCreateArticIe. bind(this), this. onCreatedArticleError. bind(this)) ; pr ivate onCreateArticIe() : void { toastr. success ( ' 登録完了 ' ) ; th i s. i sCompl eted true; ProcessingM0daIAction. setProcessingFlag(false) ; private onCreatedArticleError(errorMessage: string) : toastr. error(errorMessage) ; ProcessingModaIAction. setProcessingFlag(false) ; vo i d { pr i vate onChangeAppState (eventName : str i ng, beforeAppState. currentAppState : AppState) : VO i d { this. isProcessing = currentAppState. isProcessing' AppState, リスト 4.3.9.3.2 c ⅱ ent/app/components/create-arti c 尾 . component. html く a [routerLink]="[' / ' ] " > もどるく / a > class="u-full-width" 国 aceh0 尾 er = " タイトル " く i nput type="text" ぐ abe I> 記事タイトルく月 abel > く d i v> く d i v *nglf=" ! i scomp leted" 引 ass="u-fu Ⅱ -wi dth"> く h2 > 記事の作成く / h2 > 55

TypeScript でつくるシングノレベージアプリケーション val ue=" { { a rt i 引 e. t i t 尾 } } " (change) ="t i t leChanged ($event) " [attr. disabled]= isProcessing ? true val ue=" { { art i 引 e. b0dy } } " rows="10' acehol der=" 本文 " class="u-full-width article_body く textarea <I abel > 本文く月 abe く d i v> く /d i v> く /d i v> く a [routerLink]="[' / ' ] " 〉一覧にもどるく / a > く d i v *nglf=" i sCompI eted"> く /d i v> く /button> 登録 isProcessing ? true [attr. disabled]= (click)=' registerButtonCIicked()" く button 引 ass="button-pr imary く /d i の </textarea> 'isProcessing ? true [attr. disabled]=' (change) ="b0dyChanged ($event) " nu Ⅱ " > nu Ⅱ " 〉 null"> リスト 4.3.9.3.3 c ⅱ ent/app/components/create-art ic 尾 . component. css 4.3.9.4 update-article. component he i ght : cal c ( 100Vh ー 500PX ) ; ー . article—body { リスト 4.3.9.4.1 c lient/app/components/update-artic 尾 . component. ts import import import import import import import {Component, OnIn i t, 0nDestroy) from ' @angul ar/core { ActivatedRoute } from ' @angular/router import * as toastr from toastr { ProcessingM0dalAction } from . /act i ons/Process i ngModal Act i on { AppStore } from . /common/AppStore' { AppState } from . /model s/AppState { RegisteredArticIe } from . /models/RegisteredArticIe' { ArticIeService } from . /services/ArticleService 56