みなさんこんにちは、現役エンジニアのサメハックです
アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています!
Angularの解説シリーズです。
今回はルーティング設定について学んでいきましょう!
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます!
- ルーティングが設定できる
- リンク設定ができる
※PCにnpm、nodeがインストールされている前提で記述します。
yarn等をお使いの方は読み替えてください。
作りたいもの
今回はリンクをクリックすると、リロードなしでページが遷移するSPAを作成します。
他のファイルは左上のハンバーガーメニューをクリックして確認してね!
ルーティングとは
ルーティングとは、簡単に言うと
リクエストされたURLによって、表示するコンポーネントを切り替えることです。
“https://samehack.com” → ホーム画面
“https://samehack.com/about” → プロフィール画面
このような表示切り替えのことをルーティングと呼びます。
SPAとルーティング
一般的なWebサイトではホーム画面とプロフィール画面は
完全に別の画面として存在しているので、
ページを移動する際には再読み込みが必要です。
しかしAngularのような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: 表示されるコンポーネント },
];
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 {}
リンクを設定しよう
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フォローしてもらえると嬉しいです🦈