c3에서 하이브리드 앱을 만들어 보자. - 페이지 전환 편

지난번 의 계속입니다.

버튼 설치

우선은 화면 천이의 트리거가 되는 버튼을 설치합니다.

src/page/home/home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  The world is your oyster.
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>

  // ボタンを追加
  <button  ion-button>next</button>

</ion-content>

이제 한 번 실행해 봅시다.

$ ionic cordova run ios

next 라고 표시된 버튼이 표시되었습니다.
지금은 표시되었을 뿐이므로, 반응은 합니다만 천이는 하지 않습니다.

페이지 생성

다음은 천이처의 페이지를 만들어 갑니다.
ionic에는 generate 라는 편리한 명령이 준비되어 있어 페이지의 추가도 간단하게 할 수 있습니다.
이쪽 에 목록이 있습니다.

$ ionic generate page nextPage
[OK] Generated a page named nextPage!

src/pages/ 아래에 next라는 디렉토리와 그 안에 다음과 같은 파일이 생성되었습니다.

src/pages/next/next.html
src/pages/next/next.module.ts
src/pages/next/next.scss
src/pages/next/next.ts

페이지 로드

페이지가 생성되면 루트 모듈에서 새로 생성된 모듈을 로드해야 합니다.

src/app/app.module.ts

.
.
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { NextPageModule } from '../pages/next/next.module'; // ←追加

@NgModule({
  .
  .
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    NextPageModule  // ←追加
  ],
  .
  .
})
export class AppModule {}

위의 두 줄을 추가합니다.
사양하는 모듈이 늘어날 때마다 이 파일에 추가 설정을 해 갑니다.
이제 페이지를 사용할 준비가 되었습니다.

전환 처리 추가

페이지 자체와 페이지를 사용할 준비가 되었으므로, 이번에는 버튼을 눌러 페이지 천이를 하는 처리를 추가해 갑니다.

방금 추가한 버튼에 클릭 이벤트를 추가합니다.

src/pages/home/home.html

<button ion-button (click)="toNextPage()">next</button>

이제 버튼을 클릭하면 toNextPage()라는 처리를 해줍니다.
다음은 이 toNextPage() 의 내용을 씁니다.

src/pages/home/home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { NextPage } from '../next/next';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {

  }

  // ボタンが押されたときのページ遷移処理
  toNextPage(){
    this.navCtrl.push(NextPage);
  }
}

추가하고 있는 것은 3행째의 import 와, toNextPage() 라고 하는 처리입니다.

실행

움직이자.

$ ionic cordova run ios

다음은 데이터의 영속화라든지 씁니다.