【Angular入門(10)】画面遷移してみる

はじめに

今回はAngularで画面遷移を行う手順について解説します。

いつも通り、簡単なサンプルプログラムを作成しながら説明していきます。

 

最終的に作るアプリは、面白みはないですが、、、

こんな感じ

 

 

 

 環境

  • OS:OS X 10.11 El Capitan
  • node:v8.1.0
  • Angular CLI:1.6.7
  • Visual Studio Code:1.13

 

サンプルプログラム作成

サンプルプログラムは以下の手順で作成します。

  1. Angular CLIでプロジェクトを新規作成する
  2. 作成したプロジェクトのソースを一部修正する
  3. 遷移先の画面を新規作成する
  4. 画面遷移情報を定義する
  5. ブラウザで画面遷移を確認する

 

1.Angular CLIでプロジェクトを新規作成する

Visual Stuido Codeを起動し、「Shift」+「Control」+「@」で統合ターミナルを立ち上げます。

 

任意のディレクトリ内で、プロジェクトを新規作成します。

command
$ ng new pageTransitionSample

以上でプロジェクト新規作成は完了です。

 

2.作成したプロジェクトのソースを一部修正する

src/app/app.component.htmlを以下のように修正してください。

src/app/app.component.html
<router-outlet></router-outlet>
以上でソースの修正は完了です。

MEMO

router-outletタグの中に画面遷移先のコンポーネントの画面が埋め込まれます。

この後、URLと動作するコンポーネントの紐付け定義は行いますが、コンポーネントがこのタグに埋め込まれる形で画面表示され、URL変更と共にコンポーネントも切り替わります。

 

画面遷移というよりも、複数作ったコンポーネントをrouter-outletタグの中で差し替えるイメージです。親となる画面は1画面で、画面の一部分を切り替えるSPA(Single Page Application)ですね。

 

3.遷移先の画面を新規作成する

src/app/appnext.component.htmlを新規作成してください。

src/app/appnext.component.html
<div style="text-align:center">
  <h1>
    Welcome to {{title}}!
  </h1>
  <img width="300" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=">
  <h2><a href="/nextnext">nextnextページへ遷移</a></h2>
</div>

src/app/appnext.component.tsを新規作成してください。

src/app/appnext.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'appnext-root',
  templateUrl: './appnext.component.html'
})
export class AppNextComponent {
  title = 'appNext';
}

src/app/appnextnext.component.htmlを新規作成してください。

src/app/appnextnext.component.html
<div style="text-align:center">
  <h1>
    Welcome to {{title}}!
  </h1>
  <h2><a href="/next">nextページへ遷移</a></h2>
</div>

src/app/appnextnext.component.tsを新規作成してください。

src/app/appnextnext.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'appnextnext-root',
  templateUrl: './appnextnext.component.html'
})
export class AppNextNextComponent {
  title = 'appNextNext';
}
以上で遷移先の画面作成は完了です。

 

4.画面遷移情報を定義する

src/app/app-routing.module.tsを新規作成してください。

src/app/app-routing.module.ts
import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

/*画面遷移先を追加する場合は以下にimport追記*/

import { AppComponent }   from './app.component';
import { AppNextComponent }   from './appnext.component';
import { AppNextNextComponent }   from './appnextnext.component';

/*画面遷移先を追加する場合は以下に遷移時のパスと起動モジュールを定義*/
const routes: Routes = [
    // パスの指定がない場合はAppNextComponentが起動
    { path: '', component: AppNextComponent },
    // パスにnextが指定されるとAppNextComponentが起動
    { path: 'next', component: AppNextComponent },
    // パスにnextnextが指定されるとAppNextNextComponentが起動
    { path: 'nextnext', component: AppNextNextComponent }    
  ];

@NgModule({
    imports: [ RouterModule.forRoot(routes) ],
    exports: [ RouterModule ]
  })
  export class AppRoutingModule {}
MEMO

RoutesがURLのパスと動作するコンポーネントを紐付けている定義情報です。

パスにnextが指定されると、router-outletタグの中身をAppNextComponentのコンポーネントに差し替えます。

 

src/app/app.module.tsを以下のように修正してください。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { AppNextComponent } from './appnext.component';
import { AppNextNextComponent } from './appnextnext.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [
    AppComponent,
    AppNextComponent,
    AppNextNextComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
[/codebox] 以上で画面遷移情報の定義は完了です。

 

ブラウザで画面遷移を確認する

ローカルでWebサーバを立ち上げ、ブラウザを確認します。

 

上のように画面遷移できればOKです。

 

おわりに

本記事では、Angularでページ遷移させるサンプル画面作成しました。

画面遷移というよりは親画面に定義したrouter-outletタグの中のコンポーネントを差し替えるイメージという方が正しいですかね。

 

AngularのRouterを利用すればめちゃめちゃ簡単にSPA(Single Page Application)が作れることが分かりました。

Reactなどでもこれに置きかわる機能が用意されているのかとは思いますが、ますますAngular気に入りました。。。

 

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください