クロスプラットフォーム対応したモバイルアプリ開発フレームワークである
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
の３ファイルが生成されていることが確認できると思います。
次にこのページを利用するために、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要素の値にバインドしています。
また今回はstringを渡しましたが、文字列に限らず任意のオブジェクトを渡すことが可能です。
以上、IonicCliを用いたページの生成とページの遷移実装について解説しました。
ルーティング周りでIonicフレームワークがAngular実装を隠蔽してくれてるので画面遷移が簡単で嬉しいですね。
次回はHTTP通信を行いREST APIからJSONを取得し画面表示するまでの一連の処理を実装したいと思います。
