AngularJs 2 - main.ts & app.component.ts

이전에 만들었던 프로젝트 디렉토리 밑에 app 이라는 디렉토리를 만들자. 물론 꼭 그렇게 해야되는 것은 아니지만, 일반적인 룰을 따라 주는 것이 편하다.

app 디렉토리에 main.ts 와 app.componet.ts 파일을 만든다.

main.ts

	import {bootstrap} from 'angular2/platform/browser'
	import {AppComponent} from './app.component'
	bootstrap(AppComponent);

view raw main.ts hosted with ❤ by GitHub

index.html에서 import한다고 했던 app/main 파일이다.

3번째 줄에서 AppComponent라는 모듈을 import하는데 이는 app.component.ts 파일에서 만들어진 것이다.

app.component.ts

	import {Component} from 'angular2/core';
	@Component({
	selector: 'my-app',
	template: '<h1>My First Angular 2 App</h1>'
	})
	export class AppComponent { }

view raw app.component.ts hosted with ❤ by GitHub

6번째 줄에서 AppComponet라는 이름으로 export 하고 있다.

@Component 데코레이터 함수에 의해 이 콤포넌트가 어떻게 생성되고 사용되어야 하는지 메타데이터를 통해 알려진다.

3번째 줄의 selector라는 필드를 통해 <my-app>이라는 tag를 선택해서 4번째줄의 template 필드의 내용을 보여주게 된다.<my-app>이라는 tag는 index.html 파일에 존재 했었다.

이제 npm start라는 명령을 실행하면 썰렁하지만 동작하는 페이지를 볼 수있다.