Angularでルートを設定する

このレッスンでは、ビュー間を移動し、アプリケーションのURLを管理する方法であるAngularのルーティングについて学びます。

ルーティングとは

ルーティングを使うと、URLに基づいてAngularアプリケーション内の異なるコンポーネントやページ間を移動できます。

ルーティングモジュールを設定する

プロジェクトの作成時にルーティングモジュールを作成するか、後からAngular CLIを使って作成します。

ng generate module app-routing --flat --module=app

ルートを定義する

ルートは、コンポーネントに関連付けられたパスの配列として定義します。

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

Router Outlet

<router-outlet></router-outlet>を使うと、ルートに基づいて一致するコンポーネントを動的に描画できます。

<router-outlet></router-outlet>

routerLinkで移動する

routerLinkディレクティブを使ってビュー間を移動します。

<a routerLink="/home">Home</a>

プログラムで移動する

Routerサービスを使って、プログラムから移動することもできます。

this.router.navigate(['/home']);

ワイルドカードルート

ワイルドカードルートを使って定義されていないパスを処理し、カスタム404ページを表示します。

{ path: '**', component: PageNotFoundComponent }

まとめ

ルーティングの基本を理解し、Angularアプリでルートを効果的に設定できるようになりました。よくできました。