【Angular】ルーティングを設定しよう！【RouterModule】

みなさんこんにちは、現役エンジニアのサメハックです

アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています！

Angularの解説シリーズです。

今回はルーティング設定について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

この記事を読むと・・・

ルーティングが設定できる
リンク設定ができる

※PCにnpm、nodeがインストールされている前提で記述します。
　yarn等をお使いの方は読み替えてください。

環境がない人はcodesansboxを使ってね！

作りたいもの
ルーティングとは
1. SPAとルーティング
ルーティング設定をしよう
まとめ

作りたいもの

今回はリンクをクリックすると、リロードなしでページが遷移するSPAを作成します。

これが今回の完成形だよ！
他のファイルは左上のハンバーガーメニューをクリックして確認してね！

ルーティングとは

ルーティングとは、簡単に言うと
リクエストされたURLによって、表示するコンポーネントを切り替えることです。

“https://samehack.com” →　ホーム画面
“https://samehack.com/about” →　プロフィール画面

このような表示切り替えのことをルーティングと呼びます。

SPAとルーティング

一般的なWebサイトではホーム画面とプロフィール画面は
完全に別の画面として存在しているので、
ページを移動する際には再読み込みが必要です。

しかしAngularのようなSPA（シングルページアプリケーション）では
初回のアクセスでページ全体の情報を取得し、
それ以降はルーティング情報に応じて
表示するコンポーネントを部分的に変更しているため
処理の高速化ができます。

SPAでは画面を”擬似的に”遷移しているよ！

ルーティング設定をしよう

子ページ用コンポーネントの作成

ng generate component page1
ng generate component page2
ng generate component page3

今回はデフォルトのまま使用するよ！

ルーティング設定ファイルの作成

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

–flat　・・・app直下にファイルのみを作成
–module=app　・・・app.module.tsのimportsに自動追加

my-routing.module.ts

■ルーティング設定の構文


// ルート情報を設定
const routes: Routes = [
  { path: 'パス', component: 表示されるコンポーネント },
];

パスはあくまでURLのパスであって、
my-routing.module.tsからコンポーネントファイルへの相対パスではないよ！

import { NgModule } from '@angular/core';
// ルーター用モジュール
import { RouterModule, Routes } from '@angular/router';
import { Page1Component } from './page1/page1.component';
import { Page2Component } from './page2/page2.component';
import { Page3Component } from './page3/page3.component';
import { TopPageComponent } from './top-page/top-page.component';

// ルート情報を設定
const routes: Routes = [
  // { path: 'パス', component: 表示されるコンポーネント },
  { path: 'top', component: TopPageComponent },
  { path: 'page1', component: Page1Component },
  { path: 'page2', component: Page2Component },
  { path: 'page3', component: Page3Component },
  /*
    リダイレクト設定
    ・パスがない場合/topにリダイレクト
    ・以下との違いはURLに/topと表示されるか否か
        { path: '', component: TopPageComponent },
   */
  { path: '', redirectTo: 'top', pathMatch: 'full' },
];

@NgModule({
  imports: [
    // ルーティングを有効にする
    RouterModule.forRoot(routes),
  ],
  // app.module.tsでルーティングをインポートできるようにする
  exports: [RouterModule],
})
export class MyRoutingModule {}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { MyRoutingModule } from './my-routing.module';
import { Page1Component } from './page1/page1.component';
import { Page2Component } from './page2/page2.component';
import { Page3Component } from './page3/page3.component';
import { TopPageComponent } from './top-page/top-page.component';

@NgModule({
  declarations: [
    AppComponent,
    Page1Component,
    Page2Component,
    Page3Component,
    TopPageComponent,
  ],
  imports: [BrowserModule, MyRoutingModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

app.module.tsは基本的に自動更新されているよ！

リンクを設定しよう

Angularでは純粋なページ遷移ではないため、
aタグのリンクの記述方法が通常とは異なります。

<a routerLink="パス">テキスト</a>

また、ルーティング設定を受け取る設定も必要です

<router-outlet></router-outlet>

app.component.html

<ul>
  <li>
    <a routerLink="">トップページ</a>
  </li>
  <li>
    <a routerLink="page1">ページ1</a>
  </li>
  <li>
    <a routerLink="page2">ページ2</a>
  </li>
  <li>
    <a routerLink="page3">ページ3</a>
  </li>
</ul>

<router-outlet></router-outlet>

画面で確認してみると、URLと表示画面が正しく切り替わることがわかります。
これでルーティングの設定が完了しました！

まとめ

ルーティングとは、URLにより表示するコンポーネントを切り替えること
RouterModule, Routesを使用する
aタグのリンクはhrefでなくrouterLinkを使用する

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram