Angularの基礎(ルーティングによる画面遷移)
要点
Angularの学習として、今後アプリケーションを作っていくに当てって、4つのポイントで要点をまとめました。
- 基本構成
- ルーティングによる画面遷移
- ルーティングを使わない画面遷移
- API連係
この記事では2について記録しておきたいと思います。
前提
前の記事で作成した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を1ページ内に表示
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
![](https://blog.sawa-works.com/wp-content/uploads/2024/05/e5ef8c7947856daa41d842def3372de8.png)
ルーティング設定
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」も表示されていません。
![](https://blog.sawa-works.com/wp-content/uploads/2024/05/d83341dccd97c9746683ad35c6e8c8d4.png)
URLに「http://localhost:4200/main」と入れて再表示すると、「main」の画面が表示されます。
![](https://blog.sawa-works.com/wp-content/uploads/2024/05/6058260020c0f0c9739f29ecac134262.png)
URLに「http://localhost:4200/sub」と入れて再表示すると、「sub」の画面が表示されます。
![](https://blog.sawa-works.com/wp-content/uploads/2024/05/8846e03b38ae6a2055a9aca2e56d0f9f.png)
ボタンによるルーティング制御
ここまででルーティングとしてのチュートリアルは終わりですが、更に画面上にボタンを配置して、そのボタンでページが遷移するようにしてみます。
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
初期表示では、ボタンが2つ表示されていますが、「main」も「sub」も表示されていません。
![](https://blog.sawa-works.com/wp-content/uploads/2024/05/e3623d8e70d9c09d99c238726ba44487.png)
「Go Main」ボタンを押下すると、「main」に遷移します。
この時、URLも「main」になっています。
![](https://blog.sawa-works.com/wp-content/uploads/2024/05/ab5f050d1aaaca6cf8dbc39e4587ecc9.png)
「Go Sub」ボタンを押下すると、「sub」に切り替わります。
URLも「sub」になっています。
![](https://blog.sawa-works.com/wp-content/uploads/2024/05/fb8fda4dccc3e835a4f342ce546020f1.png)
まとめ
以上がルーティングに関するまとめとなります。
大まかに、アプリケーションを作るイメージに近づいてきた感じがします。
一方で、ボタン配置の際に「ディレクティブ」というキーワードがありました。
Angularでは「コンポーネント」「ディレクティブ」が重要なキーワードになります。
「ディレクティブ」は少し形容しにくいキーワードではありますが、私は「DOMや属性に作用する機能」と言語解釈しています。
一方で「コンポーネント」は「ディレクティブ」にViewが付加されたものと解釈できます。
雑な言い方をすれば処理イメージの機能を「ディレクティブ」、画面機能を「コンポーネント」という見方でしょうか。
この辺は、より理解を深める必要はあると思います。