ルーティングの概要

ほとんどのアプリケーションでは、アプリケーションに複数のページが必要になる時が来ます。その時は必ず、ルーティングがユーザーにとってのパフォーマンスの重要な部分になります。

このアクティビティでは、Angular Routerを使用してアプリケーションを設定および構成する方法を学びます。

1. app.routes.ts ファイルの作成

   app.routes.ts 内で、以下のように変更します。

   1. @angular/router パッケージから Routes をインポートします。
   2. Routes 型の routes という名前の定数をエクスポートし、値として [] を割り当てます。

   import {Routes} from '@angular/router';
   
   export const routes: Routes = [];

2. プロバイダーへのルーティングの追加

   app.config.ts で、以下の手順でAngular Routerにアプリケーションを構成します。

   1. @angular/router から provideRouter 関数をインポートします。
   2. ./app.routes.ts から routes をインポートします。
   3. providers 配列で、routes を引数として provideRouter 関数を呼び出します。

   import {ApplicationConfig} from '@angular/core';
   import {provideRouter} from '@angular/router';
   import {routes} from './app.routes';
   
   export const appConfig: ApplicationConfig = {
     providers: [provideRouter(routes)],
   };

3. コンポーネントへの RouterOutlet のインポート

   最後に、アプリケーションがAngular Routerを使用できる状態にするには、ルーターが目的のコンテンツを表示する場所をアプリケーションに伝える必要があります。これは、@angular/router から RouterOutlet ディレクティブを使用することで実現します。

   App のテンプレートを更新し、<router-outlet /> を追加します。

   import {RouterOutlet} from '@angular/router';
   
   @Component({
   ...
   template: `
       <nav>
         <a href="/">Home</a>
         |
         <a href="/user">User</a>
       </nav>
       <router-outlet />
     `,
   imports: [RouterOutlet],
   })
   export class App {}

これで、アプリケーションはAngular Routerを使用できるようになりました。すばらしいですね！🙌

勢いを維持して、次のステップであるアプリケーションのルートの定義を学びましょう。