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';
そしてdeclarations
とentryComponents
プロパティの要素に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>
これで変更は完了しました!
ブラウザで確認すると
と、ボタンが追加されています。これをクリックすると
遷移できました!今回はこれで完了です!
次回はionicで開発するために押さえておきたい最低限のAngular2の記法をまとめます