Angularの基礎（ルーティングによる画面遷移）

2024年5月3日 最終更新日時 : 2024年5月3日 sawa

要点

Angularの学習として、今後アプリケーションを作っていくに当てって、４つのポイントで要点をまとめました。

  1. 基本構成
  2. ルーティングによる画面遷移
  3. ルーティングを使わない画面遷移
  4. API連係

この記事では２について記録しておきたいと思います。

前提

前の記事で作成したDocker環境の「sample01」を使います。

最初に、ターミナルからdockerを起動して、dockerの中に入ります。

遷移するページ「main」と「sub」を用意する

コンポーネント「main」「sub」を作成する

ターミナル（docker内のプロンプト）で以下のコマンドを実行

// mainコンポーネントを作成
ng generate component main

// subコンポーネントを作成
ng generate component sub

コマンド実行により、「/src/app」の下に「main」「sub」のフォルダが作られて、その配下には以下のファイルが作成されます。

  • ***.component.css
  • ***.component.html
  • ***.component.spec.ts
  • ***.component.ts

※「***」はそれぞれmainとsub

main.component.htmlとsub.component.htmlを編集

それぞれのページを見やすくするためにタイトルを表示します

<h3>Main Page</h3>
<p>このページはMainです</p>

※subも同じように記述します。

まずはmainとsubを１ページ内に表示

app.component.tsを編集

/src/app/app.component.ts を以下のように編集。

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

import { MainComponent } from './main/main.component';
import { SubComponent } from './sub/sub.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, MainComponent, SubComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'sample01';
}

「main.component」「sub.component」をインポートして、それを@Componentのimportに追記しています。
なお、「main.component」「sub.component」のクラス名は、それぞれのtsファイルを見ればわかりますが、「MainComponent」「SubComponent」でデフォルトで記述されています。

これで、appコンポーネント内で、「main」コンポーネントと「sub」コンポーネントが使えるようになりました。

app.component.htmlを編集

/src/app/app.component.html を以下のように編集。

<h1>Routing Sample</h1>
<app-main></app-main>
<app-sub></app-sub>

デフォルトで記述されていた内容を全て消して、h1タグで画面タイトルと、main.component.htmlとsub.component.htmlを当て込みます。

main.component.htmlとsub.component.htmlは、それぞれのtsファイルの@Componentのselectorで定義されている名前をタグとして記述します。

この時点で確認

ターミナルで以下のコマンドを実行して、ブラウザで確認。

ng serve --host 0.0.0.0

ルーティング設定

app.routes.tsを編集

/src/app/app.routes.ts を以下のように編集。

import { Routes } from '@angular/router';

import { MainComponent } from './main/main.component';
import { SubComponent } from './sub/sub.component';

export const routes: Routes = [
  {
    path: 'main',
    component: MainComponent
  },
  {
    path: 'sub',
    component: SubComponent
  }
];

「main.component」「sub.component」をインポートして、それをRoutesの配列にオブジェクトとして追記しています。
なお、pathはURLで指定するパスを示し、componentはそのパス指定時のページを示します。

app.component.tsを編集

/src/app/app.component.ts を以下のように編集。

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'sample01';
}

編集というよりは、先ほどの記述を撤廃して、デフォルトの状態に戻しました。

この後、app.component.htmlで、main.component.htmlとsub.component.htmlの当て込みを消すので、関連付けとしての記述が不要になったという理由です。

app.component.htmlを編集

/src/app/app.component.html を以下のように編集。

<h1>Routing Sample</h1>
<router-outlet></router-outlet>

先ほど記述した「app-main」タグと「app-sub」タグを削除して、代わりに「router-outlet」タグを記述しました。

これにより、app.routes.tsとの整合がとられます。

結果を確認

ターミナルで以下のコマンドを実行して、ブラウザで確認。

ng serve --host 0.0.0.0

初期表示では、「main」も「sub」も表示されていません。

URLに「http://localhost:4200/main」と入れて再表示すると、「main」の画面が表示されます。

URLに「http://localhost:4200/sub」と入れて再表示すると、「sub」の画面が表示されます。

ボタンによるルーティング制御

ここまででルーティングとしてのチュートリアルは終わりですが、更に画面上にボタンを配置して、そのボタンでページが遷移するようにしてみます。

app.component.tsを編集

/src/app/app.component.ts を以下のように編集。

import { Component } from '@angular/core';
import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, RouterLink, RouterLinkActive],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'sample01';
}

「RouterLink」と「RouterLinkActive」をインポートします。

これでhtmlでルーティングのためのディレクティブが利用可能になりました。

app.component.htmlを編集

/src/app/app.component.html を以下のように編集。

<h1>Routing Sample</h1>
<nav>
  <a class="button" 
    routerLink="main"
    routerLinkActive="activebutton"
    ariaCurrentWhenActive="page">
    Go Main
  </a>
  <a class="button" 
    routerLink="sub"
    routerLinkActive="activebutton"
    ariaCurrentWhenActive="page">
    Go Sub
  </a>
</nav>
<router-outlet></router-outlet>

「routerLink」はルーティングのためのディレクティブで、パラメータには app.routes.ts で定義したpathを指定します。

なお、「routerLinkActive」はルーティングによりアクティブとなったページに対してclassを付与するディレクティブです。

app.component.cssを編集

上記で配置したボタンの装飾として、/src/app/app.component.css を以下のように編集。

.button {
  box-shadow: inset 0 1px 0 0 #fff;
  background: #fff linear-gradient(to bottom, #fff 5%, #f6f6f6 100%);
  border-radius: 6px;
  border: 1px solid #dcdcdc;
  display: inline-block;
  cursor: pointer;
  color: #666;
  font-family: Arial, sans-serif;
  font-size: 15px;
  font-weight: bold;
  padding: 6px 24px;
  text-decoration: none;
  text-shadow: 0 1px 0 #fff;
  outline: 0; 
}
.activebutton {
  box-shadow: inset 0 1px 0 0 #dcecfb;
  background: #bddbfa linear-gradient(to bottom, #bddbfa 5% 100%);
  color: #fff;
  text-shadow: 0 1px 0 #528ecc;
}

結果を確認

ターミナルで以下のコマンドを実行して、ブラウザで確認。

ng serve --host 0.0.0.0

初期表示では、ボタンが２つ表示されていますが、「main」も「sub」も表示されていません。

「Go Main」ボタンを押下すると、「main」に遷移します。
この時、URLも「main」になっています。

「Go Sub」ボタンを押下すると、「sub」に切り替わります。
URLも「sub」になっています。

まとめ

以上がルーティングに関するまとめとなります。
大まかに、アプリケーションを作るイメージに近づいてきた感じがします。

一方で、ボタン配置の際に「ディレクティブ」というキーワードがありました。
Angularでは「コンポーネント」「ディレクティブ」が重要なキーワードになります。
「ディレクティブ」は少し形容しにくいキーワードではありますが、私は「DOMや属性に作用する機能」と言語解釈しています。
一方で「コンポーネント」は「ディレクティブ」にViewが付加されたものと解釈できます。
雑な言い方をすれば処理イメージの機能を「ディレクティブ」、画面機能を「コンポーネント」という見方でしょうか。
この辺は、より理解を深める必要はあると思います。

カテゴリー
備忘録

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事
Angularの基礎（基本構成）
2024年5月2日
次の記事
Angularの基礎（ルーティングを使わない画面遷移）
2024年5月3日