angular quickstart 코드 분석

드디어 angular 코드를 살펴본다. 다른 프레임웍들은 일단 만들어보고 그 다음에 살펴봤는데 angular는 처음 보는게 너무 많아서 quickstart 코드를 먼저 살펴보고 만들어보든가 말든가 해야겠다.

main.ts

angular가 동작하도록 하는 부분은 어제까지 다 살펴봤으니 오늘은 main.ts로 바로 들어간다.

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

platformBrowserDynamic는 이름에서 보이다시피 angular 모듈을 브라우저에서 바로 실행하도록 도와주는 것으로 보인다. AppModule으로 Angular앱을 시작한다.

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

AppModule은 @NgModule 이라는 decorator를 붙였다. BrowserModule을 import하고 AppComponent로 bootstrap 한다. bootstrap에 포함된 Component만 실행된다.

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent  { name = 'Angular'; }

AppComponent는 @Component decorator를 붙인다. my-app 태그를 <h1>Hello {{name}}</h1>라는 템플릿으로 만든다. 값은 AppComponent 내부에서 set한다.

---

코드를 쭉 따라가보니 몰랐던 decorator가 angular의 핵심기능을 수행하고 있는 것을 보게됐다. '저게 뭐야. annotation이야?' 라고 생각했는데 typescript의 decorator였다. 뭔가 typescript를 마스터하지 않고 angular를 깊게 살펴보는 것은 어려운 일이란 생각이 들었다. 그리고 typescript가 생각보다 많은 기능을 가지고 있고 type을 명시하는 것이 얼마나 코드를 복잡하게 보이게 만드는지 새삼 느꼈다.