クロスプラットフォーム対応したモバイルアプリ開発フレームワークである
Ionic2を使ってサンプルアプリを作成していきます。
Ionicでモバイルアプリを作ろう！(1)概要・環境構築
Ionicでモバイルアプリを作ろう！(2)ツールの基本的な使い方を覚える
前回でアプリの雛形の生成と実行の方法がわかったところで
今回は新たにページを生成してそのページへの遷移を実装したいと思います。
ページの生成
Angular2でのSinglePageApplication開発に通じているならページを自分で0から作っても構いませんが、
Ionicにはページのテンプレートを生成してくれるコマンドがあるので今回それを使います。
1 2 | $ 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を開き、以下のように変更を加えます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | 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への遷移を行うボタンを追加しましょう。
1 2 3 4 5 6 7 8 9 10 | <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で関数の実装を行います。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | 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への画面遷移が実装できました。
データを渡す
画面遷移するとき、前の画面から次の画面にデータを渡したい場面というのは多いと思います。
その場合は次のように実装します。
1 2 3 4 5 6 | export class Page1 {... goToMyPage() { this.navCtrl.push(MyPage, { text : "Text from Page1"}); }} |
pushの引数にオブジェクトを渡すことでデータを引き継ぐことができます。
遷移先は次のようになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 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"); }...} |
1 2 3 4 | ...<ion-content padding> <h2>{{text}}</h2></ion-content> |
遷移先ではNavParamsオブジェクトの中に格納されて渡ってくるのでkeyを指定して取り出してあげます。
NavParamsオブジェクトはコンストラクタの引数にInjectされるのでそこから取得できます。
今回は取り出した値をtextプロパティに格納し、textをテンプレートでh2要素の値にバインドしています。
また今回はstringを渡しましたが、文字列に限らず任意のオブジェクトを渡すことが可能です。
以上、IonicCliを用いたページの生成とページの遷移実装について解説しました。
ルーティング周りでIonicフレームワークがAngular実装を隠蔽してくれてるので画面遷移が簡単で嬉しいですね。
次回はHTTP通信を行いREST APIからJSONを取得し画面表示するまでの一連の処理を実装したいと思います。
