Angular_ルーティングの仕組み #264日目
Angularはコンポーネント単位でhtmlを書いたり、機能を実装したりします。そしてそのコンポーネントを組み合わせることで1つのアプリケーションを作成していきますが、どのパスでどのコンポーネントを表示するか、自分で設定することが可能です。
それらの振り分けの処理をルーティングと呼びます。
ちなみにAngularはSingle Page Application (SPA) なので、Single Pageと聞くとパスのような概念は存在しないように感じます。ただSingle Pageとはそういう意味ではなく、様々なコンポーネントを1つのファイル内に収めつつ、その中にはパスを制御する仕組み (ルーティング) が存在します。
SPAは最初の読み込みに時間がかかりますが、1つのファイルに各コンポーネントが収まっているので、それらのコンポーネント間の遷移 (ページ遷移) が速いのが利点です。また、Angularではページの閲覧履歴も管理されているそうです。
ルーティングファイルの作成
ngコマンドを使用して新しいプロジェクトを作成した場合は、routingファイルを作成するかどうか尋ねられます。yesとすれば「app-routing.module.ts」が作成されます。
後から追加したい場合は、src/appで以下コマンドを叩けばOKです。
$ ng generate module app-routing --flat --module=app--flatオプションは、プロジェクトのトップレベルにファイルを作成する指示です。これを指定しないと「app-routing」というフォルダが作成されてしまいます。
--module=appオプションは、app.module.tsファイルのimport文と、importsのリストに作成したモジュール名を追加する指示です。
ルーティングファイルの設定
作成されたapp-routing.module.tsを以下のように編集します。ここではAngularの公式チュートリアルのコードを流用しています。
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HeroesComponent } from './heroes/heroes.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
import { DashboardComponent } from './dashboard/dashboard.component';
const routes: Routes = [
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'heroes', component: HeroesComponent },
{ path: 'detail/:id', component: HeroDetailComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
const routes:にルーティング情報である「Routes」を設定し、pathとcomponentをプロパティに持つ配列を記述します。
URLはホームアドレスとパスで構成されますが、ここでのpathで設定されている文字列がホームアドレスに続くパスになります。このパスにアクセスすると、そのcomponentにアクセスできるという仕組みです。パスが何も入っていない「''」で定義されるのがデフォルトルートです。
imports: [RouterModule.forRoot(routes)]はアプリケーションのルートレベルでルーターを設定しているという意味です。
exports: [RouterModule]で、RouterModuleがアプリ全体で利用できるようになります。
router-outletを配置
Angularでルーティングを使用するには、HTMLファイル上のルーティングを読み込む箇所にrouter-outletを配置します。
[app.component.html]
<h1>{{ title }}</h1>
<!--<app-heroes></app-heroes>-->
<nav>
<a routerLink="/dashboard">dashboard</a>
<a routerLink="/heroes">Heroes</a>
</nav>
<router-outlet></router-outlet>router-outletの箇所がルーティングによって表示内容が色々と変わる場所なので、ツールバー等、常にアプリに表示しておきたいコンポーネントはルーターの外側に配置します。上記ではdashbordとheroesをルーターの外側に置いています。
ルーターを使ってパラメーターの受け渡しも出来るので、この辺もまた追って整理したいと思います。
ここまでお読みいただきありがとうございました！