Blank부터 시작하는 아이오닉 / 페이지 생성 및 이동과 lazy loading

Blank부터 시작하는 아이오닉

지난번에 만든 Blank프로젝트를 가지고 아이오닉을 좀만져보자

짠

Ionic Blank

the world is your oyster.

If you get list, the docs will be your guide

이라고 나온다

소스로 가서 

src/pages/home/home.html을 보면?

쨘 글씨만 바꿔서 어떻게 변경되는지 볼까?

자 글씨가 변경되면 바로바로 적용된다

안드로이드

아이폰

윈도우폰

3플랫폼 모두 지원한다

당연한것이 웹기반 이기때문이다

자 페이지를 추가해보자

해당 프로젝트 폴더로 가서

ionic g page page2 를 입력하면 두번째 페이지가 추가된다

페이지가 추가되어도 두번째 페이지로 갈수 없으니 첫번째 페이지만 계속 보인다

여기서 오류가 보이는 사람은

src/pages/page2/page2.module.ts 파일을가서

2, 10번째 줄이 IonicPageModule이 아니라 IonicModule로 되어있다면 IonicPageModule로 수정하도록 하자

오류를 잡거나 오류가 안났다면 두번째 페이지를 찾으러 가자

src/pages/home.html 으로 다시가서

  <button ion-button (click)="navigateToPage2()">go to the secondpage</button>

라고 작성하고 버튼으 만들어준다

근데 navigateToPage2()펑션은 없기에 만들어줘야 하는데 어디서 만들어야 할까?

home.ts가 되겠다

가서 만들어 주도록 하자

  navigateToPage2(): void {

    this.navCtrl.push(Page2Page)

  }

로 펑션을 만들고

눌러도 오류가 날것인데

src/app/app.modules.ts로 가서

import { Page2Page } from '../pages/page2/page2';

declarations에 Page2Page 추가

entryComponents에 Page2Page추가

아래와 같이 나오도록 하자

이제 버튼이 작동하는지 보자

잘 작동한다

그러면 Lazy loading에 대해서 알아볼까??

page3을 추가하자

어떻게 했더라?

ionic g page page3

으로 생성하고

home.html에서 버튼하나 더 생성

<button ion-button (click)="navigateToPage3()">go to the thirdpage</button>

home.ts에서 펑션정의

  navigateToPage3(): void {

    this.navCtrl.push('Page3page')

  }

하면?

엥? 좀전에 했던것과 다르게 app.module.ts로 가서 import를 해줄 필요가 없게 되었다

그럼 이것을 조금 더 응용해보면

ionic g page main

으로 메인 페이지를 만들고

src/app/app.component.ts 로 가서

rootPage:any = HomePage;

를

rootPage: string= 'MainPage';

로 수정하고

위의 import { HomePage } from '../pages/home/home';를 주석

다음으로

app.module.ts에가서 HomePage와 Page2Page 관련 내용을 전부 주석 처리하면

이렇게 수정이 되고

아래는 그 결과이다

root page가 MainPage로 변경되었다

이후 기존에 만든 버튼과 펑션을 복사해서 다시 빌드하면?

전부 레이지 로딩으로 구성된 앱 화면이 출력된다

정말 Life is easy다..

오늘은 여기까지 다음시간에 다른내용으로 돌아오도록 하겠다