아이오닉 튜토리얼

아이오닉은 src/index.html로 앱을 시작합니다.

<!-- 아이오닉의 루트 컴포넌트로 app을 불러온다. -->  
<ion-app></ion-app>

<!-- 빌딩 과정에서 polyfills js를 생성한다. -->
<!-- 브라우저 API를 보충하는 역할이다. -->
<!-- polyfills는 브라우저에서 지원하지 않는 API일 지라도 개발자가 사용할 수 있도록 도와준다. -->
<script src="build/polyfills.js"></script>

<!-- 빌딩 과정에서 vendoer.js를 생성한다. --> 
<!-- node_modules의 모든 의존성(dependencies)를 포함한다. --> 
<script src="build/vendor.js"></script>

<!-- 빌딩 과정에서 bundle js를 생성한다. --> 
<!-- 모들 파일을 1개의 묶음 파일로 만드는 과정 --> 
<script src="build/main.js"></script>

./src/

src 디렉토리에서 Ionic 앱을 구동하는 대부분의 코드를 작성합니다.

ionic serve

를 실행시키면, src/ 안에 있는 코드는 transpiled (언어를 다른 언어로 번역) 됩니다. 

아이오닉에서는 타입스크립트(TypeScript)를 작성하면, 브라우저가 이해할 수 있는  ES5로 transpile 합니다. 

src/app/app.module.ts 

앵귤러의 모듈의 구성과 해당 모듈의 링크를 나타냅니다.

@NgModule({
  declarations: [MyApp, HomePage, ListPage],
  imports: [BrowserModule, IonicModule.forRoot(MyApp)],
  bootstrap: [IonicApp],
  entryComponents: [MyApp, HomePage, ListPage],
  providers: [StatusBar, SplashScreen, {provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}

@NgModule 데코레이터로 나타내고, 각 구성 항목을 연결하게 됩니다.

runtime에 메타데이터 객체(컴포넌트 템플릿을 컴파일하는 방식과 주입기를 생성하는 방식을 작성하는 객체)를 사용합니다. 

*참고

아래 개념을 기본적으로 알고 있어야 합니다.

• Bootstrapping.
• JavaScript Modules vs. NgModules. - 이 블로그에서 번역한 NgModule