Angular Webアプリ開発入門１６

はじめに

これまで、simpleformというプロジェクトに、「テンプレート駆動版足し算」「リアクティブ版の足し算」「FormBuilderを使ったコーヒーの登録」という3つのコンポーネントを作った。これらのうちどのコンポーネントを表示するのかは、app.component.htmlで切り替えていた。

今回は3つの機能の簡単なタブ式のメニューページを作る。それぞれのリンクにクリックすると、ページの下の部分がそれぞれのコンポーネントに切り替わる仕組みを作る。

完成ページ

URLとコンポーネントの関連付け

多くのWebアプリケーションでは、「/foo.html」というパスだと「foo.html」が「/bar.html」というパスだと「bar.html」が何々というように、URLのパスによってどのページが表示するのかを切り替えることができるが、Angularにもそれに似た機能がある。ただし、この設定はデフォルトで設定されるものではない。

たとえば「/controls」というパスでアクセスしたときに、「app-controls」に相当するコンポーネントが自動的に表示されるような機能はなく、開発者が明示的に設定する必要がある。URLと表示するコンポーネントを関連付ける方法「ルーティング」という。

新規モジュールの作成

リンクを作ったりするには、RouterModuleというモジュールを使ってプログラミングをする。
まず新規にモジュールを作成する。

ng g module app-routing –flat –module=app

RoutingModuleを構成する

app-routing.module.tsファイル修正して、RoutingModuleを使うように構成していく。

import { NgModule, Component } from ‘@angular/core’;

import { CommonModule } from ‘@angular/common’;

import { RouterModule, Routes} from ‘@angular/router’;

import { SimpleFormComponent } from ‘./simple-form/simple-form.component’;

import { BetterFormComponent } from ‘./better-form/better-form.component’;

import { ControlsComponent } from ‘./controls/controls.component’;

const routes: Routes = [];

@NgModule({

imports: [

CommonModule,

RouterModule.forRoot([

{path:’simple-form’, component:SimpleFormComponent},

{path:’better-form’, component:BetterFormComponent},

{path:’controls’, component:ControlsComponent}

]

)

],

exports:[

RouterModule

],

declarations: []

})

export class AppRoutingModule { }

①RoutingModuleのインポート

import { RouterModule, Routes} from ‘@angular/router’;

②URLパスとコンポーネントの関連付け定義

RouterModule.forRoot([

{path:’simple-form’, component:SimpleFormComponent},

{path:’better-form’, component:BetterFormComponent},

{path:’controls’, component:ControlsComponent}

]

)

③エクスポートする

export class AppRoutingModule { }

コンポーネントを切り替えるリンクや表示場所を定義する

<nav>

<a routerLink=”.simple-form”>Simple Form</a> |

<a routerLink=”.better-form”>Better Form</a> |

<a routerLink=”.controls”>Controls</a>

</nav>

<div><router-outlet></router-outlet></div>

①リンクの構成

RouterModuleで定義したリンクを構成するには、「routerLink属性」で指定する。

<a routerLink=”.simple-form”>Simple Form</a> |

ここで定義している「simple-form」は、先ほどRouterModuleで定義した、次のpathに相当するものである。

{path:’simple-form’, component:SimpleFormComponent},

②コンポーネントを表示する場所の定義

<div><router-outlet></router-outlet></div>

タブらしい表示にする

タブらしく表示する為にCSSでスタイルを定義していく。現在選択されているところは色を変える仕様とする。

全体のCSS

body{

margin-top: 50px;

margin-left: 50px;

}

div{

margin-top: 10px;

}

app.component.css

a {

padding: 10px;

margin-right: 4px;

background-color: darkolivegreen;

color: khaki;

text-decoration: none;

}

a:link, a:visited, a:hover {

color: khaki;

}

a.selected-item {

color:darkolivegreen;

background-color: khaki

}

div {

padding: 50px;

background-color: khaki;

color: darkolivegreen;

}

リンクが選択中の時にクラスを出力するように構成する

選択中のリンクの場合に、「class=selected-item」と出力するには、リンクにrouterLinkActiveという属性を指定する。次のように「routerLinkActive=”selected-tem”」と記せば、選択されたときに「class=”selected-item」という出力がされ、先に定義したselected-itemのCSSが適用される。

<nav>

<a routerLink=”./simple-form” routerLinkActive = “selected-item”>Simple Form</a> |

<a routerLink=”./better-form” routerLinkActive = “selected-item”>Better Form</a> |

<a routerLink=”./controls” routerLinkActive = “selected-item”>Controls</a>

</nav>

<div><router-outlet></router-outlet></div>

ドキュメントルートをリダイレクトする

import { NgModule } from ‘@angular/core’;

import { CommonModule } from ‘@angular/common’;

import { RouterModule, Routes} from ‘@angular/router’;

import { SimpleFormComponent } from ‘./simple-form/simple-form.component’;

import { BetterFormComponent } from ‘./better-form/better-form.component’;

import { ControlsComponent } from ‘./controls/controls.component’;

@NgModule({

imports: [

CommonModule,

RouterModule.forRoot([

{path:”, redirectTo: ‘/simple-form’, pathMatch: ‘full’},

{path:’simple-form’, component:SimpleFormComponent},

{path:’better-form’, component:BetterFormComponent},

{path:’controls’, component:ControlsComponent}

]

)

],

exports:[

RouterModule

],

declarations: []

})

export class AppRoutingModule { }

終わりに

今回は3つの機能のルーティングによるパスの関連付けを行い、簡単なタブ式のメニューページを作り、ドキュメントルートのリダイレクトを行った。そして、それぞれのリンクにクリックすると、ページの下の部分がそれぞれのコンポーネントに切り替わる仕組みを作り、CSSを定義しタブらしい表示を記述した。