🐣

Angularの公式チュートリアルをやっていく　その１１ - Add routing

2023/06/17に公開

Angular

Angularの公式チュートリアル「はじめての Angularアプリ」を進めていきます。

今回やるのは、↓の部分です。

ルーターを作成する

このページではルーティングについてやっていきます。
Angularのルーティングについてはページに解説がありますが、その英文と解説について書きましたのでご確認ください。

このチュートリアルではAngularのルーティングについて紹介します。ルーティングとは、アプリケーション内の一つのコンポーネントから別のコンポーネントへ移動する機能のことを指します。シングルページアプリケーション（SPA）では、ユーザーがリクエストしたビューを表示するためにページの一部だけが更新されます。

AngularのRouterを使用すると、ユーザーはルートを宣言し、そのルートがアプリケーションによって要求された場合にどのコンポーネントを画面に表示するかを指定できます。

このレッスンでは、アプリケーションでルーティングを有効にし、詳細ページへのナビゲーションを可能にします。
和訳 - https://angular.jp/tutorial/first-app/first-app-lesson-10#conceptual-preview-of-routing

上の文章では、Angularのルーティングとその重要性、そしてこれがどのように動作するかを説明しています。

ルーティングはSPA（シングルページアプリケーション）の中心的な要素です。
ユーザーがアプリケーション内で異なるビュー間を移動できるようにします。

つまり、SPAにおけるサイト内のページの行き来。画面遷移とその管理をルーティングと呼んでいるのです。

ルーティングはページ全体を再読み込みすることなく部分的に更新することで実現します。これにより、ユーザー体験が向上し、効率的なリソース利用が可能になります。

ディティールコンポーネントを新規作成する

まずは、家の詳細ページを作成します。
まだこれまでは、家のリストページしか作成していませんから、ページ遷移（ルーティング）を実現するために、遷移先の詳細ページを作成してきましょう。

まずは、以下のコマンドを実行して、家の詳細ページのコンポーネント（ディティールコンポーネント）を新規作成します。

ng generate component details --standalone --inline-template --skip-tests

新しいコンポーネントが作成されました。

アプリケーションを一度ビルドして、生成に不具合がないか確かめます。

ng serve

問題なくブラウザが表示されれば、コンポーネントの生成は正常に行われています。

アプリケーションにルーティングを追加する

それでは、ここからルーティングを作成していきます。

routes.tsの作成

まずは、appディレクトリにroutes.tsファイルを作成します。
このファイルにルーティング設定を定義します。

これはコマンドで作成するのではなく、手作業で作成しましょう（画像の一番下にroutes.tsを作成しています）。

まだファイルは空の状態で大丈夫です。

main.tsにコードを追加

main.tsにコードを追加します。

下のコードを追加することで、Angularアプリケーションにルーティング設定はこのファイルを使ってね、というのを指示できます。

main.ts

  /*
  *  Protractor support is deprecated in Angular.
  *  Protractor is used in this example for compatibility with Angular documentation tools.
  */
  import { bootstrapApplication,provideProtractorTestingSupport } from '@angular/platform-browser';
+ import { provideRouter } from '@angular/router';
+ import routeConfig from './app/routes';
  import { AppComponent } from './app/app.component';
  
- bootstrapApplication(AppComponent,
-     {providers: [provideProtractorTestingSupport()]})
-   .catch(err => console.error(err));
+ bootstrapApplication(AppComponent,
+   {
+     providers: [
+       provideProtractorTestingSupport(),
+       provideRouter(routeConfig)
+     ]
+   }
+ ).catch(err => console.error(err));

app.component.tsにリンクを追加する

app.component.tsファイルを下記のように変更することで、画面上部のロゴにリンクを追加できます。

リンクは'/'なので、トップページに遷移するリンクのようですね。
そして、そのリンクが機能するようにシステムを制御しているのがルーター（routes.tsファイル）という訳です。

また、<app-home>を<router-outlet>にも変更していますね。

app.component.ts

  import { Component } from '@angular/core';
+ import { RouterModule } from '@angular/router';
  import { HomeComponent } from './home/home.component';
  
  @Component({
    selector: 'app-root',
    standalone: true,
-   imports: [HomeComponent],
+   imports: [HomeComponent, RouterModule],
    template: `
      <main>
+       <a [routerLink]="['/']">
          <header class="brand-name">
            <img
              class="brand-logo"
              src="/assets/logo.svg"
              alt="logo"
              aria-hidden="true"
            />
          </header>
+       </a>
        <section class="content">
-         <app-home></app-home>
+         <router-outlet></router-outlet>
        </section>
      </main>n>
      </main>
    `,
    styleUrls: ['./app.component.css'],
  })
  export class AppComponent {
    title = 'homes';
  }
}

新しいコンポーネントにルートを追加する

次はroutes.tsにルーティングの設定を行っていきます。

routes.tsファイルを下記のように記述しましょう。

routes.ts

import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { DetailsComponent } from './details/details.component';

const routeConfig: Routes = [
  {
    path: '',
    component: HomeComponent,
    title: 'Home page',
  },
  {
    path: 'details/:id',
    component: DetailsComponent,
    title: 'Home details',
  },
];

export default routeConfig;

そうしたら、アプリケーションを再ビルドして画面を確認します。

ng serve

いつもの画面が表示されました。

`<router-outlet>`とルーティング

なぜ<app-home></app-home>から<router-outlet></router-outlet>にタグが変わったのにも関わらず、HomeComponentの内容が表示できているのでしょうか？

調べてみたところ、これがAngularのルーターの力のようです。

routes.tsの設定では現在、下記のようになっています。

path: '' → component: HomeComponent

path: 'details/:id' → component: DetailsComponent

これは、このアプリケーションが該当のパスを表示するとき、そのパスに紐づけられたコンポーネントを<router-outlet>の部分に表示するという動きをすることになります。

つまり、

http://localhost:4200/ にアクセスする
→　<router-outlet>はHomeComponentを表示

http://localhost:4200/details/** にアクセスする
→　<router-outlet>はDetailsComponentを表示

という事になり、
この表示の切り替えをroutes.tsで設定して、Angularのルーターが動いているという訳ですね。

へー、面白い。

これにてAdd routingは完了です。

←　前へ　Angularの公式チュートリアルをやっていく　その１０ - Angular services
→　次へ　Angularの公式チュートリアルをやっていく　その１２ - Customize the details page