サンプルコードで身につける: ルーティング — URLで画面を切り替える

解説で学んだ概念を、5つの具体例で確認します。素朴な例から実務寄りの例へと進みます。

1URLとコンポーネントの対応表を作る

ルーティングの出発点は、Routes型の配列に「このURLならこのコンポーネント」と書く対応表です。path: '' はトップページを意味します。まだ画面遷移のコードは1行もなく、対応表という宣言だけで構成されているのがポイントです。

import { Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { ContactComponent } from './contact.component';

// 「このURLならこのコンポーネント」という対応表
export const routes: Routes = [
  { path: '', component: HomeComponent }, // トップページ
  { path: 'contact', component: ContactComponent }, // /contact
];

2ルートを登録して表示場所を決める

定義した対応表は、アプリ起動時に provideRouter(routes) で登録して初めて働きます。URLに対応するコンポーネントは <router-outlet /> を置いた場所に表示されます。「定義」「登録」「表示場所」という3点セットがそろってルーティングが動き出す、という全体像を示す例です。

import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
import { AppComponent } from './app.component';
import { routes } from './app.routes';

// アプリ起動時にルート定義を登録する
bootstrapApplication(AppComponent, {
  providers: [provideRouter(routes)],
});

// AppComponent のテンプレートに <router-outlet /> を置くと、
// URLに対応するコンポーネントがそこに表示される

3routerLink でページを移動する

ナビゲーションのリンクは href ではなく routerLink で書き、RouterLink と RouterOutlet を imports に登録します。routerLink ならページ全体を再読み込みせず、表示部分だけが切り替わります。ヘッダーのグローバルナビはアプリの骨格としてほぼ必ずこの形になります。

import { Component } from '@angular/core';
import { RouterLink, RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [RouterLink, RouterOutlet],
  // href ではなく routerLink。再読み込みなしで切り替わる
  template:
    '<nav>' +
    '  <a routerLink="/">ホーム</a>' +
    '  <a routerLink="/contact">お問い合わせ</a>' +
    '</nav>' +
    '<router-outlet />',
})
export class AppComponent {}

4リダイレクトと404ページを用意する

redirectTo でトップへのアクセスを別ページへ転送し、'**'(ワイルドカード)でどのルートにも一致しないURLを404ページへ導きます。ルートは上から順に照合されるため、'**' を必ず最後に書くのが鉄則です。存在しないURLへのアクセスは実際のサービスでは日常的に起きるので、404の用意は実務の必須項目です。

import { Routes } from '@angular/router';
import { DashboardComponent } from './dashboard.component';
import { NotFoundComponent } from './not-found.component';

export const routes: Routes = [
  // トップへのアクセスは /dashboard へ転送する
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent },
  // どのルートにも一致しなければ404ページ(必ず最後に書く)
  { path: '**', component: NotFoundComponent },
];

5管理画面のルート構成を設計する

注文・顧客・設定の3画面を持つ管理画面を想定した、実務スケールのルート設計です。トップは注文一覧へリダイレクトし、最後にワイルドカードで404を受け止める、という定番の並びがそのまま使えます。新しい画面を増やすときは、この配列に1行足してナビにリンクを追加するだけです。

import { Routes } from '@angular/router';
import { OrderListComponent } from './order-list.component';
import { CustomerListComponent } from './customer-list.component';
import { SettingsComponent } from './settings.component';
import { NotFoundComponent } from './not-found.component';

// 管理画面: 注文一覧をホームにして、顧客・設定ページを並べる
export const routes: Routes = [
  { path: '', redirectTo: 'orders', pathMatch: 'full' },
  { path: 'orders', component: OrderListComponent },
  { path: 'customers', component: CustomerListComponent },
  { path: 'settings', component: SettingsComponent },
  { path: '**', component: NotFoundComponent },
];

// ナビ側は <a routerLink="/orders">注文</a> のように並べる