ionic2 페이지 생성
-
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>src/app/app.html에 들어가면 위와 같은 코드가 있는데, 여기서 주목할 것은 [root]입니다. [root] 프로퍼티는 처음 한 번은 반드시 지정해줘야 하는 프로퍼티로 root-page의 ion-nav 컴포넌트입니다. ion-nav가 로딩되면 이 컴포넌트는 rootPgae 변수값에 따라 참조된 것을 표시합니다.
src/app/app.component.tx를 보면 MyApp 컴포넌트가 생성자를 명시한 것을 보실 수 있습니다.
...
import { HelloIonicPage } from '../pages/hello-ionic/hello-ionic';
...
export class MyApp {
...
// make HelloIonicPage the root (or first) page
rootPage: any = HelloIonicPage;
pages: Array<{ title: string, component: any }>;
constructor(private platform: Platform, private menu: MenuController, ...) {
...
}
...
}이 생성자에서 rootPage 변수가 HelloIonicPage를 가지는데, HelloIonicPage는 처음으로 로딩되는 nav controller가 됩니다.
페이지 생성
페이지를 생성하기 전에, 우리가 import해야 할 HelloIonicPage에 대해 더 알아볼 필요가 있습니다. src/pages/hello-ionic폴더 안에 있는 hello-ionic.ts를 열어봅시다.
import { Component } from '@angular/core';
@Component({
selector: 'page-hello-ionic',
templateUrl: 'hello-ionic.html'
})
export class HelloIonicPage {
constructor() {
}
}모든 페이지는 위와 같은 클래스를 가지며 연관된 템플릿 역시 일반적으로 가집니다. 참고로 위의 @Component는 Angular에 관련된 내용인데, 데코레이터입니다. selector는 컴포넌트 이름을, templateUrl은 템플릿(.html)의 경로를 의미합니다. styleUrl도 있긴 한데 이름에서 짐작하듯 .css나 .scss파일을 지정할 때 씁니다. 이 예제에서는 사용하지 않으나 빈 css, scss라도 만들어두는 것이 패턴의 일환으로 볼 때 좋습니다. (예제도 사용하지는 않지만 scss파일은 있습니다) 데코레이터와 클래스를 모두 가진 이 ts파일 하나를 컴포넌트라고 합니다.
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Hello Ionic</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h3>Welcome to your first Ionic app!</h3>
<p>
This starter project is our way of helping you get a functional app running in record time.
</p>
<p>
Follow along on the tutorial section of the Ionic docs!
</p>
<p>
<button ion-button color="primary" menuToggle>Toggle Menu</button>
</p>
</ion-content>다음으로 살펴볼 것은 hello-ionic.html입니다. (같은 폴더에 있습니다)
<ion-navbar>는 이 페이지의 navigation bar(이하 nav)를 위한 템플릿입니다. 만약 이 페이지를 방문하게 되면, 삼 모양 버튼과 제목(Hello Ionic)이
뜨게 될 것입니다.
나머지 태그 부분은 표준 아이오닉2 코드로 컨텐츠 영역을 설정하고 환영 메세지를 표현해주는 부분들입니다.
페이지를 추가해봅시다
src/pages/list/list.ts를 들어가서 새 페이지에 대해 정의합시다.
import {Component} from "@angular/core";
import {NavController, NavParams} from 'ionic-angular';
import {ItemDetailsPage} from '../item-details/item-details';
@Component({
templateUrl: 'list.html'
})
export class ListPage {
selectedItem: any;
icons: string[];
items: Array<{ title: string, note: string, icon: string }>;
constructor(public navCtrl: NavController, public navParams: NavParams) {
// If we navigated to this page, we will have an item available as a nav param
this.selectedItem = navParams.get('item');
this.icons = ['flask', 'wifi', 'beer', 'football', 'basketball', 'paper-plane',
'american-football', 'boat', 'bluetooth', 'build'];
this.items = [];
for (let i = 1; i < 11; i++) {
this.items.push({
title: 'Item ' + i,
note: 'This is item #' + i,
icon: this.icons[Math.floor(Math.random() * this.icons.length)]
});
}
}
itemTapped(event, item) {
this.navCtrl.push(ItemDetailsPage, {
item: item
});
}
}이 페이지에서 반응형 메뉴바를 눌러 My First List페이지로 들어가면 나오는 Item들을 만듭니다. 즉, 실질적인 값들에 대한 컨트롤을 여기서 합니다.
for문에서 열심히 각 요소에 대해 정의를 하고 있네요. 이렇게 만든 item들을 itemTapped(event, item)에서 item에 이벤트가 발생하면 NavController가 ItemDetailsPage와 item을 화면으로 보내줍니다.
그리고 list.html 템플릿을 보면 list.ts에서 구성한 값을 표현합니다.
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>My First List</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
<ion-icon name="{{item.icon}}" item-left></ion-icon>
{{item.title}}
<div class="item-note" item-right>{{item.note}}</div>
</button>
</ion-list>
</ion-content> list.ts가 list.html의 컴포넌트이기 때문에 (click)="itemTapped($event, item)"처럼 함수도 이벤트에 등록할 수 있습니다.
이런 식으로 컴포넌트와 템플릿을 만들면 페이지를 만들 수 있습니다. 만든 페이지로 이동하기 위해서는 NavController 변수에 표현하고 싶은 페이지와 값을 넣고 클릭 이벤트가 발생할 때 전달하면 되는 것이죠. 정 모르겠다 싶으시면 list.ts와 list.html, item-details.ts와 item-details.html을 보시고 비슷하게 따라하시는 것을 추천드립니다.