1. 페이지 생성

    아래의 명령어로 2개의 페이지를 생성한다. app/pages/에 생성된다.

$ ionic g page pageone
$ ionic g page pagetwo

    아래와 같은 구조가 만들어진다.

src
├─── assets
├─── theme
├─── app
|     ├─── app.module.ts
|     ├─── app.html
|     └─── [...]
├─── pages
|      ├─── pageone
|      |       ├─── pageone.html
|      |       ├─── pageone.scss
|      |       └─── pageone.ts
|      ├─── pagetwo
|      |       ├─── pagetwo.html
|      |       ├─── pagetwo.scss
|      |       └─── pagetwo.ts
|      └─── [...]
└─── [...]

2. 페이지 등록

    app.module.ts의 상단에 방금 생성한 두 페이지를 import 한다.

import { PageOne } from '../pages/pageone/pageone';
import { PageTwo } from '../pages/pagetwo/pagetwo';

    import 하고 나서 app.module.ts의 @NgModule아래에도 두 페이지를 넣어준다.

@NgModule({
  declarations: [
    MyApp,
    PageOne,
    PageTwo
    // 기타 등등
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    PageOne,
    PageTwo
    // 기타 등등
  ],
  providers: [
    // 기타 등등
  ]
})

3. 페이지 이동

    pageone --> pagetwo로 이동한다고 하자. 아래의 코드와 같이 pageone.ts의 상단에pagetwo를 import한다.

import { PageTwo } from '../pagetwo/pagetwo';

    아래와 같이 push로 페이지를 이동시킬 수 있다.

this.navCtrl.push(PageTwo);

    pop으로 이전 페이지로 돌아 갈 수 있다.

this.navCtrl.pop();

    이런식으로 함수를 만들어 쓸 수 있다.

export class PageOne {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
  }

  nextPage() {
    this.navCtrl.push(PageTwo);
  }

}