Ionic2

Ionic2는 타입스크립트로 작성되며 Angular2를 기반으로 한다.

Ionic2 프로젝트 폴더 구조

src 폴더의 내용이 www 폴더로 변환되는 과정

모든 프로그래밍 작업은 src 폴더에서 진행한다.
ionic serve로 앱을 실행하면 src폴더의 내용이 컴파일되고 합쳐져서 www 폴더로 저장된다.
ionic serve로 앱 실행 전에는 www 폴더가 비어있다가, 첫 실행시 assets, build 폴더가 생성되고 index.html 파일등이 생성된다.
src 폴더 내의 모든 scss 파일들이 css로 컴파일 되고 함쳐져서 www/build/main.css로 저장된다.
src 폴더 내의 모든 ts 파일들은 js로 컴파일되고 합쳐져서 www/build/main.js로 저장된다.
scss 파일을 추가하고자 한다면, src/pages 폴더 아래 꾸미고 싶은 탭 폴더 밑에 생성하면 된다.

Ionic import와 export

import와 export 모두 타입스크립트 구문이다.
import는 사용하고픈 모듈이 있을시에 선언한다.
export의 경우에는 어떤 클래스를 다른 곳에서 import 해서 사용하고 싶다면,
export임을 선언해주어야 한다.

ex)

import { StatusBar } from 'ionic-native';

export class MyApp{
	rootPage = HomePage;

	constructor(platform: Platform){
		platform.ready().then(() => {
			StatusBar.syleDefault();
		});
	}
}

Decorator ---------------------

@Component *컴포넌트 : 버튼, 아이콘, 메뉴, 툴바 등과 같이 앱을 구성요소나 전반적인 로직을 말한다. 컴포넌트는 하나의 페이지에 한개 또는 여러개가 있을 수 있다.

Decorator(꾸며줌) =====> 클래스 앞에 @Component를 해주면 그 클래스는 컴포넌트가 된다.

ex)

@Component() class ABC{.....} 와 같이 하면 클래스 ABC는 컴포넌트가 된다.
    유사하게 @Pipe() class EFG{.....}이 되면 EFG는 파이프가 된다.

클래스 멤버 변수에도 Decoration을 사용할 수 있다.
ex)

@Input variable1   ---> 값을 외부로부터 받는 변수
@Output variable2  ---> 값을 외부로 내보내는 변수

컴포넌트에는 하나의 객체 파라미터를 전달할 수 있는데 이를 메타데이터라고 한다.
ex)

 @Component({...........})
            메타데이터(객체)

 @Component({
	selector:...  컴포넌트를 어디에 표시할지 결정
	template:...  컴포넌트 내용을 담는 곳
  })

src/app/app.component.ts (App Component) -----------------------------------------

App Component는 root 컴포넌트라고도 하는데 이는 가장 처음 실행되고 다른 모든 컴포넌트를 포함하기 ��문이다.

import { Component } from '@angular/core';   //컴포넌트 import
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { TabsPage } from '../pages/tabs/tabs';

@Component({                    // 컴포넌트 Decoration
  templateUrl: 'app.html'       // 컴포넌트 메타데이터
})
export class MyApp {            // class 앞에 컴포넌트 데코레이션이 있으므로 
  rootPage:any = TabsPage;         MyApp 클래스는 컴포넌트가 되고 
                                   export도 있으므로 MyApp은 다른 곳에서도 
                                   import 해서 쓸수 있다.

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

MyApp 컴포넌트를 시작으로해서 더 많은 컴포넌트를 추가하여 앱 내용을 표현한다.

위의 코드를 보면 @Component 메타데이터에 templateUrl만 있고 selector가 없는데
아이오닉2의 루트 컴포넌트에서는 selector 대신, ion-app을 사용한다.
ion-app은 src 폴더의 index.html에 정의되어 있다.

< !-- Ionic's root component and where the app will load -->
< ion-app>

root component 는 app.component를 말한다.

루트 컴포넌트를 조금 더 자세히 들여다 보자!

@Component({                    
  templateUrl: 'app.html'  
})

컴포넌트 메타데이터로 template가 아닌 template가 정의되어 있는 templateurl이 있다.
그럼 app.html로 가보자!

< ion-nav [root]="rootPage">< /ion-nav>

<ion-nav>라는 DOM 요소(DOM Element)가 있고, [root]라는 DOM 속성(DOM Property)가 있다.
[root] 속성이 어떤 페이지가 Root Page 인지를 정의해준다.
Root Page는 각 화면의 가장 먼저 출력되는 페이지 이다.

import { TabsPage } from '../pages/tabs/tabs';

@Component({                    
  templateUrl: 'app.html'     
})
export class MyApp {           
  rootPage:any = TabsPage;

이 부분을 보면 TabsPage라는 변수명으로 pages/tabs 폴더에 tabs.html을 import 한다.

< ion-tabs>
  < ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home">< /ion-tab>
  < ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle">
  < ion-tab [root]="tab3Root" tabTitle="Account" tabIcon="Account">< /ion-tab>
< /ion-tabs>

이와 같이 내가 설정해놓은 세개의 탭 정보가 TabsPage에 담기고, 사용자가 각 탭을 선택할때마다
각 탭이 보여줘야할 rootPage도 변하게 된다.

정리하자면 @Component Decorator로 클래스를 Component로 만든다.
앱 화면에 나타는 Page도 하나의 Component이며, 앱 실행시 가장 먼저 나타나는 페이지가 Root page 이다.
Root Page는 app.components.ts에서 컴포넌트 메타데이터를 통해 ion-nav Dom 요소의 [root] 속성에 정의해 준다.