Ionicでモバイルアプリを作ろう!(3)ページの作成/ページ遷移


クロスプラットフォーム対応したモバイルアプリ開発フレームワークである
Ionic2を使ってサンプルアプリを作成していきます。

Ionicでモバイルアプリを作ろう!(1)概要・環境構築
Ionicでモバイルアプリを作ろう!(2)ツールの基本的な使い方を覚える

前回でアプリの雛形の生成と実行の方法がわかったところで
今回は新たにページを生成してそのページへの遷移を実装したいと思います。

ページの生成

Angular2でのSinglePageApplication開発に通じているならページを自分で0から作っても構いませんが、
Ionicにはページのテンプレートを生成してくれるコマンドがあるので今回それを使います。

$ cd MyIonicApp
$ ionic g page MyPage

ionic gはモジュールを生成するコマンドです。
ページを構成するhtmlファイル、scssファイル、tsファイルが生成されます。
/src/pages/my-page/以下に
my-page.html
my-page.scss
my-page.ts
の3ファイルが生成されていることが確認できると思います。

次にこのページを利用するために、Angular2ではモジュールとして宣言する必要があります。

Angular Modules(NgModule)

/src/app/app.module.tsを開き、以下のように変更を加えます。

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { Page1 } from '../pages/page1/page1';
import { Page2 } from '../pages/page2/page2';
import { MyPage } from '../pages/my-page/my-page';

@NgModule({
  declarations: [
    MyApp,
    Page1,
    Page2,
    MyPage
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    Page1,
    Page2,
    MyPage
  ],
  providers: []
})
export class AppModule {}

アプリのルートレベルに表示するコンポーネント(ページ)は
@NgModuleのdeclarations配列とentryComponents配列で宣言する必要があるんですね。

ページ遷移

次にPage1からMyPageへのページ遷移を実装します。

Page1にMyPageへの遷移を行うボタンを追加しましょう。

<ion-header>
...
</ion-header>

<ion-content padding>
...
  <button ion-button secondary menuToggle>Toggle Menu</button>

  <button ion-button (click)="goToMyPage()">Go To MyPage</button>
</ion-content>

(click)はAngular2の構文です。クリックイベント時に呼ばれる関数を指定します。
page1.tsで関数の実装を行います。

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

import { NavController } from 'ionic-angular';
import { MyPage } from '../my-page/my-page';

@Component({
  selector: 'page-page1',
  templateUrl: 'page1.html'
})
export class Page1 {

  constructor(public navCtrl: NavController) {
  }

  goToMyPage() {
    this.navCtrl.push(MyPage);
  }

}

ルートページに対して階層を持たせたい時はNavController#push($Page)を呼んであげればOKです。
これでPage1からMyPageへの画面遷移が実装できました。

 

データを渡す

画面遷移するとき、前の画面から次の画面にデータを渡したい場面というのは多いと思います。

その場合は次のように実装します。

export class Page1 {
...
  goToMyPage() {
    this.navCtrl.push(MyPage, { text : "Text from Page1"});
  }
}

pushの引数にオブジェクトを渡すことでデータを引き継ぐことができます。
遷移先は次のようになります。

import { Component } from '@angular/core';
import { NavController, NavParams} from 'ionic-angular';

@Component({
  selector: 'page-my-page',
  templateUrl: 'my-page.html'
})
export class MyPage {
  text:string;

  constructor(public navCtrl: NavController, navParams: NavParams) {
    this.text = navParams.get("text");
  }
...
}
...
<ion-content padding>
  <h2>{{text}}</h2>
</ion-content>

遷移先ではNavParamsオブジェクトの中に格納されて渡ってくるのでkeyを指定して取り出してあげます。
NavParamsオブジェクトはコンストラクタの引数にInjectされるのでそこから取得できます。

今回は取り出した値をtextプロパティに格納し、textをテンプレートでh2要素の値にバインドしています。

ionic-page-push-with-data

また今回はstringを渡しましたが、文字列に限らず任意のオブジェクトを渡すことが可能です。

以上、IonicCliを用いたページの生成とページの遷移実装について解説しました。
ルーティング周りでIonicフレームワークがAngular実装を隠蔽してくれてるので画面遷移が簡単で嬉しいですね。

次回はHTTP通信を行いREST APIからJSONを取得し画面表示するまでの一連の処理を実装したいと思います。

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

PAGE TOP