페이지 만들기

Ionic 2, Anuglar 2 기준에서 새 페이지를 만드는 법

기본 blank 템플릿을 기준으로 추가된 내용을 작성하였다.

페이지 만들기

cmd 창에 아이오닉 폴더 안으로 이동후 아래 커맨드를 입력한다.

$ ionic g page [만들페이지 이름]

그럼 pages 폴더 안에

페이지명.html, 페이지명.scss, 페이지명, schedule.ts

세가지 파일이 추가된다.

모듈 추가

  • app.module.ts

다음과 같이 새로 만든 페이지 내용을 추가한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { SchedulePage } from '../pages/schedule/schedule'; <!-- 추가된 소스 -->

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
declarations: [
MyApp,
HomePage,
SchedulePage <!-- 추가된 소스 -->
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
SchedulePage <!-- 추가된 소스 -->
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}

컴포넌트 추가

  • app.component.ts

다음과 같은 내용을 추가한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import { Component, ViewChild } from '@angular/core'; <!-- 추가된 소스 -->
import { Nav, Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HomePage } from '../pages/home/home';
import { SchedulePage } from '../pages/schedule/schedule';

@Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage:any = HomePage;
private pages = {}; <!-- 추가된 소스 -->
@ViewChild(Nav) nav: Nav; <!-- 추가된 소스 -->

constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
platform.ready().then(() => {
statusBar.styleDefault();
splashScreen.hide();
});
this.pages = { <!-- 추가된 소스 -->
'HomePage': HomePage,
'SchedulePage': SchedulePage
};
}

// 새 페이지 이동 함수를 추가한다.
openPage(pageName) {
const component = this.pages[pageName];
if (!component) {
return;
}
this.nav.setRoot(component);
}
}

방법2 NavControll 이용

1
2
3
4
5
6
7
8
...
import { NavController } from 'ionic-angular';
...
constructor(public navCtrl: NavController) {
}
openPage(page) {
this.navCtrl.push(page);
}

NavController.push(PageName) : 페이지 이동

NavController.pop() : 이전 페이지로 돌아감

메뉴 버튼 만들기

  • app.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
<ion-list>
<button ion-item (click)="openPage('HomePage')">
메인
</button>
<button ion-item (click)="openPage('새페이지이름')">
새페이지이름
</button>
</ion-list>
</ion-content>

</ion-menu>

<ion-nav #content [root]="rootPage"></ion-nav>
  • home.html / 새페이지.html
1
2
3
4
5
6
7
8
9
10
11
12
<ion-header>
<ion-navbar>
<button menuToggle ion-button icon-only>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>제목</ion-title>
</ion-navbar>
</ion-header>

<ion-content padding>
내용
</ion-content>

Reference

Ionic Doc

bengtler’s Git SampleSource

Comment and share

Author's picture

Junho Nam

enjoy while living


full stack web developer


Seoul, Korea