Angular Router (@angular/router) は、Angularアプリケーションでナビゲーションを管理するための公式ライブラリであり、フレームワークの核となる部分です。Angular CLIによって作成されたすべてのプロジェクトにデフォルトで含まれています。
インストール
Angular Routerは、Angular CLIのng newコマンドによりセットアップされたすべてのAngularプロジェクトにデフォルトで含まれています。
前提条件
- Angular CLI
既存のプロジェクトに追加
プロジェクトにAngular Routerが含まれていない場合、以下のコマンドで手動インストールできます:
ng add @angular/routerAngular CLIが、必要なすべての依存関係をインストールします。
SPAでルーティングが必要な理由
WebブラウザでURLに移動すると、ブラウザは通常、Webサーバーにネットワークリクエストを行い、返されたHTMLページを表示します。リンクをクリックするなどの別のURLに移動すると、ブラウザは別のネットワークリクエストを行い、ページ全体を新しいものに置き換えます。
シングルページアプリケーション（SPA）は、ブラウザが最初のページであるindex.htmlに対してのみWebサーバーにリクエストを行う点で異なります。その後、クライアントサイドルーターが引き継ぎ、URLに基づいて表示するコンテンツを制御します。ユーザーが別のURLに移動すると、ルーターはページ全体のリロードをトリガーすることなく、その場でページコンテンツを更新します。
Angularがルーティングを管理する方法
Angularにおけるルーティングは、主に3つの要素で構成されています。
- ルートは、ユーザーが特定のURLにアクセスしたときにどのコンポーネントを表示するかを定義します。
- アウトレットは、アクティブなルートに基づいてコンポーネントを動的にロードおよびレンダリングする、テンプレート内のプレースホルダーです。
- リンクは、フルページリロードをトリガーすることなく、アプリケーション内の異なるルート間をユーザーが移動するための手段を提供します。
さらに、Angularルーティングライブラリは、次のような追加機能を提供します。
- ネストされたルート
- プログラムによるナビゲーション
- ルートパラメーター、クエリ、ワイルドカード
ActivatedRouteによるアクティブ化されたルート情報- ビュートランジション効果
- ナビゲーションガード
次のステップ
Angularルーターを使用してルートを定義する方法について学びましょう。