Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

URLとリンクでコンポーネント表示を切り替える「Angular 2」のルーター

次世代Webアプリケーションフレームワーク「Angular」の活用 第5回

  • LINEで送る
  • このエントリーをはてなブックマークに追加

 本連載では、Webアプリケーションフレームワーク「Angular 2」の活用方法をサンプルとともに紹介しています。今回は、Angular 2のコンポーネントにURLのパスを対応付けて、一般的なWebページのリンクと同じ操作でコンポーネントを切り替え表示できる、ルーターの機能について紹介します。

目次

はじめに

 Angular 2は、Googleとオープンソースコミュニティで開発されているJavaScriptフレームワークで、従来のAngularJS(AngularJS 1)の次期バージョンです。Angular 2はAngularJS 1に対して多くの変更点があり、コードの記述法も基本的に異なります。

 Angular 2では、Webページ内にコンポーネントを配置して画面を構成します。このときに「ルーター」機能を利用すると、コンポーネントにそれぞれURLのパスを対応付けて、Webページのリンクでコンポーネントを切り替え表示できます。Webブラウザの履歴機能も利用でき、通常のWebページ遷移と同じように操作できるメリットがあります。

 本記事では、Angular 2のルーターを利用する方法について、サンプルとともに説明していきます。

対象読者

  • 正式版になったので本格的にAngular 2を使い始めようと思っている方
  • 最新フレームワークに触れておきたい方
  • 通常のWebページのような挙動を期待する方

必要な環境

 Angular 2はJavaScriptのフレームワークですが、公式WebサイトのドキュメントやサンプルはTypeScript向けが先行して整備される場合が多く、本連載でもTypeScriptでコードを記述していきます。また、サンプルの実行にはNode.jsが必要になります。

 今回は以下の環境で動作を確認しています。

  • Windows 10 64bit版
    • Angular 2 2.1.1
    • Node.js v6.9.1 64bit版
    • Microsoft Edge 38.14393.0.0

 ダウンロードできるサンプルには、Angular 2で開発を始めるもととなる、クイックスタートプロジェクト(angular-quickstart)を含めています。プロジェクトのフォルダーでNode.jsのコマンド「npm install」を実行してライブラリをインストール後、「npm start」コマンドで実行できます。プロジェクトの実行方法については過去記事も参照してください。なお、Angular 2の各バージョンに対応したクイックスタートプロジェクトが、GitHubで公開されています。

ルーターでコンポーネントを切り替える実装

 最初に、複数のコンポーネントを切り替える単純なサンプル(angular-001-router1)で、ルーターの利用方法を説明します。このサンプルでは、図1のように、画面上部のリンクをクリックして、画面下部のコンポーネントを切り替え表示できます。このとき、コンポーネントに対応するURLがブラウザーのアドレスバーに表示されます。また、ブラウザーの「戻る」「進む」ボタンで画面遷移できます。

図1 ルーターでコンポーネントを切り替え表示(angular-001-router1)
図1 ルーターでコンポーネントを切り替え表示(angular-001-router1)

 まず、ルーターが内部的にページ履歴操作で利用しているHTML5のpushStateメソッドが正しく動作するように、index.htmlのhead要素先頭にbaseタグを追加します。baseタグは相対パスで記述されたURLの基準を指定するもので、このサンプルのURLには「http://localhost:xxxx/」のようにサブパスがないため、"/"と指定します。

リスト1 baseタグの記述(angular-001-router1/index.html)
<head>
  <base href="/"> <!-- headタグの先頭に指定 -->
(以下略)

 次に、Webページのルートモジュールを定義するapp.module.tsに、コンポーネントとルーターの定義をリスト2のように記述します。

リスト2 ルーターの設定記述(angular-001-router1/app/app.module.ts)
// Angular 2のモジュール参照 ...(1)
import { NgModule }       from "@angular/core";
import { BrowserModule }  from "@angular/platform-browser";
import { RouterModule }   from "@angular/router"

// コンポーネント参照 ...(2)
import { AppComponent }   from "./app.component";
import { HomeComponent }  from "./home.component";
import { Comp1Component } from "./comp1.component";
import { Comp2Component } from "./comp2.component";
import { ErrorComponent } from "./error.component";
 
@NgModule({
  imports:      [
    BrowserModule,
    // ルーターにルートを指定 ...(3)
    RouterModule.forRoot([
      { path: "comp1", component: Comp1Component },
      { path: "comp2", component: Comp2Component },
      { path: "", component: HomeComponent },
      { path: "**", component: ErrorComponent }
    ])
  ],
(以下略)

 (1)でAngular 2のモジュールを参照しています。モジュール定義に用いるNgModule、Webブラウザーでの実行に必要となるBrowserModuleに加えて、ルーターの定義に必要なRouterModuleを参照しています。(2)はWebページのルートコンポーネント(AppComponent)と、ルーターで切り替え表示する各コンポーネントの参照です。AppComponent以外は、HTMLテンプレートだけが指定された単純なコンポーネントです。

 ルーターの設定記述は(3)になります。RouterModule.forRootの中に「コンポーネントに対応するパスの情報」を指定します。このような情報を「ルート」と呼びます。なお、ルートコンポーネント(AppComponent)以外のコンポーネントにルートを設定する場合は、forRootの代わりにforChildメソッドを用います。

 リスト2(3)の指定内容は表1のようになります。

表1 リスト2で指定しているルートの内容
No. パス 対応するURL 表示するコンポーネント
1 comp1 http://localhost:xxxx/comp1 Comp1Component
2 comp2 http://localhost:xxxx/comp2 Comp2Component
3 (空文字) http://localhost:xxxx/ HomeComponent
4 ** http://localhost:xxxx/(任意のパス) ErrorComponent

 例えば、URLが「http://localhost:xxx/comp2」の場合、Comp2Componentコンポーネントが表示されます。ルートは上から順に評価されるため、ホームを表す空文字や、「その他」を表す**のルートは、最後に指定する必要があります。

 forRoot/forChildメソッドに指定するルートのオブジェクトには、pathとcomponentのほかに表2のようなオプションを指定できます。outletオプションと<router-outlet>タグについては後述します。また、childrenオプションを利用すると、「/comp1/child1Comp1」のようなサブパスに対応するルート(子ルート)を指定できます。詳細は公式ドキュメントを参照してください。

表2 ルートのオブジェクトに指定できるオプション
オプション名 指定内容
pathMatch パスの照合方法(prefix:前方一致、full:完全一致、デフォルトはprefix)
redirectTo ルートへのアクセスを転送する別のパス
outlet ルーターがコンポーネントを表示する<router-outlet>タグの名前
children ルートにサブパスが指定したときに評価される子ルートのリスト

 表示を切り替えるリンクや、コンポーネントの表示場所は、リスト3のように記述します。

リスト3 リンクやコンポーネント表示場所の指定(angular-001-router1/app/app.component.ts)
<!-- ルーターで表示を切り替えるリンク ...(1) -->
<a routerLink="/comp1" routerLinkActive="active">コンポーネント1</a>
<a routerLink="/comp2" routerLinkActive="active">コンポーネント2</a>
<a routerLink="/dummy" routerLinkActive="active">不正なURL</a>

<!-- ルーターがコンポーネントを表示する場所 ...(2)-->
<router-outlet></router-outlet>

 (1)のように、aタグのrouterLink属性にパスを「/comp1」のように指定します。routerLinkActive属性は、対応するコンポーネントが画面表示されているときに、リンクに設定されるCSSクラスです。ここでは「active」クラスを指定して、赤色太字になるようにCSS(styles.css)に記述しています。

 (2)の<router-outlet>タグは、ルーターがコンポーネントを表示する場所の指定です。なお、<router-outlet>タグにname属性で名前をつけて、表2のoutletパラメーターにその名前を指定すると、ルーターがコンポーネントを出力する<router-outlet>タグを指定できます。

 リスト1~3を実行すると、初期状態では表1のNo.3に対応するHomeComponentが表示され、画面上部のリンク押下で、リンクのパスに対応するコンポーネントが切り替え表示されます。「不正なURL」リンクのパス「/dummy」は明示的に定義されていないので、表1のNo.4(その他すべて)に対応するErrorComponentが表示されます。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2012年2月時点での登録メンバは37名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂き...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:次世代Webアプリケーションフレームワーク「Angular」の活用

もっと読む

All contents copyright © 2006-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5