Diaki's blog

開発に使用しているIonic2の記事を中心に色々書いていきます

Ionic入門[ファイル構造解説, ページ追加~画面遷移まで]

この記事は前回Ionic2入門[導入~ブラウザでアプリ起動まで]の続きです。

目次

フォルダ構成

  • src/pages/
    ここに各ページを構成するフォルダが入ります。現在はhomeというフォルダが入っているのがわかります。 その中に入っているファイルを見てみます。
$ ls src/pages/home/
home.html   home.scss   home.ts

基本的に一つのページは、要素を記述する.htmlスタイルを記述する .scss命令を記述する .tsファイルで構成されます。

  • src/assets/
    ここにアプリ内で使用する画像などを置きます。

  • src/theme/variables.scss
    アプリ全体に適用されるフォント、カラーなどを設定しています。最初のうちはあまりいじることはないでしょう。

  • src/app/
    app.component.ts アプリを起動したら最初に呼び出されるコンポーネントです。このコンポーネントの下に各ページのコンポーネントがぶら下がっているイメージでいます。

  • app.html
    app.component.tsで読み込んでいます。htmlのエントリポイントという認識でいいと思います。(本当はindex.htmlだが)
  • app.module.ts
    アプリ内で、どのファイルをコンポーネント(ページ)として読み込むのかを宣言するファイルです。 ページだけではなく全てのモジュールをここに記述します。 デフォルトでは、MyAppというコンポーネントがroot指定されているのがわかります。
  • main.ts
    いじらないので割愛
  • app.scss
    Ionicのコンポーネントのスタイルを変えたい場合など、ここにスタイルを記述します。アプリ全体に適用されます。

  • www/
    ionic serveなどで、各ファイルをコンパイルしてまとめられた結果がこのファイル以下に入っています。 ブラウザはこのフォルダ以下のファイルを読み込んで実行しています。

  • config.xml
    アプリの情報、設定を記述するファイル

  • package.json
    nodeモジュールの依存関係を記述するファイル

他にもファイルはありますがとりあえずここらへんがわかれば開発できるでしょう!

新しいページを作ってボタンタップで移動しよう

まずは、新しいページ(ここではSubPage)を作成します。

$ ionic generate page SubPage

そうすると、page以下にsub-pageフォルダが作成されているのがわかります。

$ ls src/pages/sub-page/
sub-page.html   sub-page.scss   sub-page.ts sub-page.module.ts

ここでsub-page.module.tsが生成されましたが、今回は必要ないので削除します。

$ rm src/pages/sub-page/sub-page.module.ts

モジュールの宣言の仕方は、app.module.tsで一括管理する方法と、各ファイルでエクスポートする方法の二つがあるのですが、 今回はapp.module.tsで一括管理する方法で実装します。なので先ほどのファイルは削除しました。

そして、app.module.ts内でSubPageを宣言します
app.module.ts

import { SubPage } from '../pages/sub-page/sub-page';

そしてdeclarationsentryComponentsプロパティの要素にSubPageを追加します。
これでapp.module.tsでの宣言は終わりです。

次に、HomePageにクリックするとSubPageに遷移するボタンをつけます。
generateコマンドを使って作成したtsファイルにはデフォルトでNavControllerという画面遷移をコントロールするモジュールがインポートされ、コンストラクタでインスタンスが作られています。
それを利用して次の関数を宣言します。
home.ts

goSubPage() {
  this.navCtrl.setRoot(SubPage);
}

SubPageのインポートを忘れないように

import { SubPage } from '../sub-page/sub-page';

この関数がボタンをクリックした時に呼ばれるようにすればいいですね。
home.html内の、</ion-content>の上に一行追加します。
home.html

<button ion-button (click)="goSubPage()">次ページへ</button>

これで変更は完了しました!
ブラウザで確認すると f:id:diaki-hk:20170606153810p:plain と、ボタンが追加されています。これをクリックすると f:id:diaki-hk:20170606153824p:plain 遷移できました!今回はこれで完了です!
次回はionicで開発するために押さえておきたい最低限のAngular2の記法をまとめます