Angularのルーティングを使用するメリットと導入手順について解説

どうもこんにちはコウヘイです。

本シリーズは、Angularについて完全初心者の私がAngularをある程度使えるようになるまで頑張るをテーマに日々の作業ログを記録する内容になります。

以下のような疑問を持ちました。

・Angularのルーティングについて詳しく知りたい
・ルーティングを使うメリットはあるの？

今回はこういった疑問に答えます。

著者情報

この記事を書いている僕ですが、Javaをメインにバックサイド開発を7年ほど経験しています。
最近フロントサイドにAngular、バックサイドにSpringBootを使用したSPA（シングルページアプリケーション）を作成する案件で働き始めたので、Angular学習を開始しました。

こんな僕が解説していきます。

Angularのルーティングを使用するメリット

はじめてルーティングを使用したときは、めっちゃ便利だとおもいました。。

その時のツイートが以下。

🔽Angularのルーティングを使用するメリット

・いちいちコンポーネントのselectorを記載しなくてもいい。
・ルーティングモジュールにルーティング情報をまとめることができるので、整理されて見やすい

使わない理由がない。使い方、覚えましょう🙌
— こうへい@3日毎にブログ更新中 (@kohe1chan) February 12, 2021

同じことですが、まとめると以下。

ルーティングを使用するメリット

いちいちコンポーネントのselectorタグを記載しなくてもいい。
ルーティングモジュールにルーティング情報をまとめることができるので、整理されて見やすい

ぶっちゃけ、使わない理由はないと思います。
というか、、実際の現場では必ず使ってます。しっかりと覚えましょう！

Angularルーティングの導入手順について解説

では本題、Angularでルーティングを使用する手順は以下になります。

手順①：AppRoutingModuleの作成

手順②：ルーティング情報に基づいて、動的にコンテンツを表示させる

手順③：ナビゲーションリンクを貼る

順に説明します。

手順①：AppRoutingModuleの作成

AppRoutingModuleの説明は以下になります。

ルートモジュールからインポートされるルーティング専用のトップレベルのモジュール

つまり、このAppRoutingModuleでルーティングを管理します。

AppRoutingModuleの作成コマンドは以下。

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

※プロジェクト作成時にルーティング機能を有効にしている場合は、すでにAppRoutingModuleは作成されていると思うので、上記コマンド実行は不要です。

コマンドの説明は以下。

–flat：「/src/app」直下にモジュールを作成
–module=app：ルートモジュールの@NgModule要素であるimport配列に自動で作成したAppRoutingModuleが追加される

では、実際に作成したAppRoutingModuleを見ながら説明します。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PreloadAllModules } from '@angular/router';
import { TopComponent } from './top/top.component';

const routes: Routes = [
  { path: 'top', component: TopComponent},　・・・①
  {
    path: 'user',
    loadChildren: () => import('./user/user.module').then(m => m.UserModule),　　・・・②
  },
  { path: '**', redirectTo: '/top', pathMatch: 'full' }　・・・③
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],　・・・④
  exports: [ RouterModule ]
})
export class AppRoutingModule { }

説明は以下。

① 「/top」にアクセスがあった場合、TomComponentを表示させる

② 「/user」にアクセスがあった場合、Userモジュールを遅延ロードして、Userモジュールのルーティング情報に従ったコンポーネントを表示させる。

③ pathに「**（ワイルドカード）」を指定すると、ルーティング情報にないパスにアクセスした場合のアクセス先を指定できる。今回は「/top」にリダイレクトさせている。pathMathはfullを指定すると、パスが完全一致した場合に画面遷移する。

④ ルーティング情報をRouteModule.forRootに指定すると、アプリケーション内全体に適応される

遅延ロードに関しては、以下の記事によくまとまっています。詳しく知りたい方は参考にしてみてください。
≫ ルートモジュールで他モジュール機能を使用する方法【遅延ロード編】

また、ルーティング情報に指定できる要素について知りたい方は公式ドキュメントを参考してください。

手順②：ルーティング情報に基づいて、動的にコンテンツを表示させる

次に、ルーティング情報に基づいて、コンテンツを表示させる方法を説明します。

HTML内で以下のタグを記述することで、動的にコンテンツを表示させることが可能になります。
※今回は「src/app/app.component.html」に記述

<router-outlet></router-outlet>　・・・①

説明は以下。

① ルーティング情報に登録されているコンテンツにアクセスがあると、<router-outlet>を記述した箇所にコンテンツが表示される

手順③：ナビゲーションリンクを貼る

次に、アプリケーション内でルーティング情報にアクセスするためのナビゲーションリンクの貼り方を説明します。
※今回は「src/app/app.component.html」に記述

<button routerLink="/top">Top</button>　・・・①
<button routerLink="/user">User</button>　・・・②

<router-outlet></router-outlet>

変更点の説明は以下。

①② ボタンが押されるとrouterLinkで指定した値のルーティング情報にアクセスし、<router-outlet>を記述した箇所にコンテンツを表示します。

というわけで今回は以上です。

Angularについて、少しでも詳しくなれたなら幸いです。
私自身も発展途上なので一緒に学んでいきましょう！

プログラミング