ルーティングの概要

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

このアクティビティでは、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 ディレクティブを使用することで実現します。

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

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

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

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