Angular4とionicを理解するための学習メモ

ionicのcliを利用してアプリケーションの雛形を作成する

$ ionic start MyIonicProject tutorial

まずはサンプルアプリケーションを動かしてみる

$ cd MyIonicProject/
$ ionic serve

ブラウザが立ち上がりサンプルのアプリケーションが確認できるかと思います。

構成について

./src/index.html

このファイルはアプリケーションのエントリーポイントですが、
主にスタイルの読み込みやブートストラップとして機能する部分であるため
アプリケーション開発時には特に手を入れないのがお作法のようです。

この中の読み込んでいるファイルについて

build/main.js
- コンパイルされた、Ionic、Angular、及び開発したJSアプリケーションのファイル
cordova.js
- Cordovaのビルドプロセス中にプロジェクトに注入されるため、ローカルでの開発中は404になるそうです。

src/index.html

  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>

  <!-- un-comment this code to enable service worker
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.error('Error', err));
    }
  </script>-->

  <link href="build/main.css" rel="stylesheet">

./src

開発用でコンパイル前のプログラムが配置されるディレクトリです。
「ionic serve」を実行することでTypeScriptなどのファイルを
www/build/main.js にコンパイルして出力し、ブラウザが読み込んで実行する流れとなります。

./src/app/app.module.ts

このファイルがアプリケーションのエントリーポイントになります。
記載されている構成などは [初級編] Angular4のアプリケーションを理解するでも記載した内容のとほぼ同じですが、Ionicに関連するモジュールの読み込みや設定が追加されているようなイメージです。

その中で

  import { MyApp } from './app.component';

...

  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
  ],

とMyAppをIonicModuleのrootとして定義しています。

./src/app/app.component.ts

ここでは、各ページのComponentの設定をしており、
テンプレートの指定やプロパティの定義、テンプレートからのイベント処理を定義したりしています。

@Component({
  templateUrl: 'app.html'
})

  constructor(
    public platform: Platform,
    public menu: MenuController,
    public statusBar: StatusBar,
    public splashScreen: SplashScreen
  ) {
    this.initializeApp();

    // set our app's pages
    this.pages = [
      { title: 'Hello Ionic', component: HelloIonicPage },
      { title: 'My First List', component: ListPage }
    ];
  }

  openPage(page) {
    // close the menu when clicking a link from the menu
    this.menu.close();
    // navigate to the new page if it is not the current page
    this.nav.setRoot(page.component);
  }

./src/app/app.html

テンプレートの下記部分では、先程のcomponentのthis.pagesの内容が下記にバインドされて表示されます。また、クリックされたときには、componentで定義しているopenPageの処理を実行するように定義されています。

<button ion-item *ngFor="let p of pages" (click)="openPage(p)">
  {{p.title}}
</button>

メインコンテンツの設定

src/app/app.html の最下部に記載されている

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

では、rootプロパティに対してComponentで指定したrootPageをバインディングしています。
component側では下記のような形で '../pages/hello-ionic/hello-ionic' を設定しています。

import { HelloIonicPage } from '../pages/hello-ionic/hello-ionic';
...
  rootPage: any = HelloIonicPage;
...

上記のようにすることでメインコンテンツとして、
src/pages/hello-ionic/hello-ionic.ts が呼び出されて実行されます。

src/pages/hello-ionic/hello-ionic.ts

各ページでは、ページ名のフォルダ配下に「xxx.ts」「xxx.scss」「xxx.html」の3つのファイルを配置するのがお作法のようです。

src/pages/hello-ionic/hello-ionic.ts
src/pages/hello-ionic/hello-ionic.scss
src/pages/hello-ionic/hello-ionic.html

参考

Ionic Tutorial

[初級編] ionic/Angular4のアプリケーション構成を理解する