ionic tutorial+ナビゲーションをやってみたメモ

ionic tutorialをやったのでメモです。
 
プロジェクトを立ち上げる

 
$ ionic start MyIonicProject tutorial
$ cd MyIonicProject
$ ionic serve
 
作成されたフォルダは、src/index.htmlはアプリのメインエントリーポイントであり、あまり使わないファイルである。
以下のスクリプトはビルドシステム。
<!-- Ionic's root component and where the app will load —>
<ion-app></ion-app> 
 
<!-- The polyfills js is generated during the build process —>
<script src="build/polyfills.js"></script> 
 
<!-- The vendor js is generated during the build process It
contains all of the dependencies in node_modules —>
<script src="build/vendor.js"></script> 
 
<!-- The main bundle js is generated during the build process -->
<script src="build/main.js"></script>
 
./src/
一番使うところ。$ ionic serve するとsrc/以下がJSにトランスパイルされる。
src/app/app.module.tsがこのアプリのエントリーポイント。
 
どのアプリもroot moduleという他の機能をコントロールするモジュールがある。
以下のモジュールではRootコンポーネントをMyApp(sec/app/app.component.ts)に設定。
なので、一番最初に読み込まれるcomponentがMyApp。一般的に他のcomponentで読み込まれるために空のシェルである。
src/app/app.module.ts
@NgModule({ 
declarations: [MyApp, HelloIonicPage, ItemDetailsPage, ListPage], 
imports: [BrowserModule, IonicModule.forRoot(MyApp)], 
bootstrap: [IonicApp], 
entryComponents: [MyApp, HelloIonicPage, ItemDetailsPage, ListPage], 
providers: []})
export class AppModule {}
 
app.component.tsにはtemplateUrlにapp.htmlとある。
その中を見ると、以下のように書いてある。
<ion-nav id="nav" [root]="rootPage" #nav swipeBackEnabled="false"></ion-nav> 
 
<ion-menu [content]="nav> 
 
<ion-header> 
<ion-toolbar> 
<ion-title>Pages</ion-title> 
</ion-toolbar> 
</ion-header> 
 
<ion-content> 
<ion-list> 
<button ion-item *ngFor="let p of pages" (click)="openPage(p)"> {{p.title}} </button> 
</ion-list> 
</ion-content> 
</ion-menu>
 
この場合、
ion-menu . . .サイドメニュー
ion-nav . . .ルートページはどこか定義(rootPageはHelloIonicPageである
 
 
ページを追加する

 
<ion-nav id="nav" [root]="rootPage" #nav swipeBackEnabled="false"></ion-nav> 
ion-navが最初に読み込まれた時にrootはrootPage(src/app/app/component.ts)であるHelloIonicPageが読み込まれると定義されている。
 
hello-ionic.ts
import { Component } from '@angular/core';
 
@Component({
selector: 'page-hello-ionic',
templateUrl: 'hello-ionic.html'
})
export class HelloIonicPage {
constructor() {
 
}
}
 
 
 
HelloIonicPageクラスがページを作成。
selectorはあってもなくてもいいけど、このページのデザインを変えたいとoverrideする時に便利。
hell-ionic.htmlはこのHelloIonicPageのテンプレートファイル。
 
src/pages/list/list.tsを見ると、新しいページが定義されている。
また、ItemDetailsPageに遷移するためには
itemTapped(event, item) {
this.navCtrl.push(ItemDetailsPage, {
item: item
});
}
 
 
上記のitemTapped()によりタップ時のイベントを定義する。
 
 
チュートリアルのhome-ionicページのボタンを押してもサイドメニューに遷移するだけだったのでボタンを押したら設定ページに行くというようなものを付け加えてみた。
 
hello-ionicでページが移動するように処理を施す。異動先のcomponentはSettingPage
hello-ionic.html
<p>
<button (click)="toSetting()" padding>リストへ</button>>
</p>
 
 
hello-ionic.ts
import { NavController } from 'ionic-angular';
import { SettingPage } from '../setting/setting';
.......
constructor(
public navCtrl: NavController
) {}
toSetting(){
this.navCtrl.push(SettingPage);
}
 
pages/settingフォルダを新たに作成し、
  • setting/setting.html
  • setting/setting.scss
  • setting/setting.ts
を作成。
 
setting.ts
import { Component } from '@angular/core';

@Component({
selector:'setting',
templateUrl:'setting.html'
})

export class SettingPage{
items = [
'プロフィール',
'設定1',
'設定2',
'設定3',
'設定4',
'設定5',
'設定6',
'色々',
'SNS'
];
itemSelected(item:string){
console.log("Selected Item", item);
}
}
 
 
setting.html
<ion-header>
<ion-navbar>
<ion-title>setting</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item *ngFor="let item of items" (click)="itemSelected(item)">{{item}}</ion-item>
</ion-list>
</ion-content>
 
 
これでcomponentは完成。これをアプリで使えるようにapp.module.tsにexportし、宣言する。
app.module.ts
import { SettingPage } from '../pages/setting/setting';
......
declarations: [
MyApp,
HelloIonicPage,
ItemDetailsPage,
ListPage,
SettingPage
],
 
entryComponents: [
MyApp,
HelloIonicPage,
ItemDetailsPage,
ListPage,
SettingPage
],
 
 
これにて以下のような画面を表示し、各アイテムをタップするとコンソールで表示されるようになる。

f:id:hiroaki77:20180124010240p:plain