angular 웹개발 (ecplise, spring boot, typescript) - #1

※ 참고 : 책 Angular with typescript development (Yakov Fain, Anton Moissev 지음, 한창현 옮김)

# typescript가 포함된 웹 기본 실행

- 이클립스 준비 (Oxygen)

- Spring starter project 생성 + web 선택

- static/index.html 생성후, localhost:8080 접속, index 페이지 출력 테스트

- index.html 코드 일부

<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.8.5"></script>
<script src="https://unpkg.com/systemjs@0.19.47/dist/system.src.js"></script>
<script src="https://unpkg.com/typescript@2.3.3"></script>
 
<script>
System.config({
    transpiler : 'typescript',
map : {
 'rxjs' : 'https://unpkg.com/rxjs@5.3.0',
        '@angular/core' : 'https://unpkg.com/@angular/core@4.1.0',
        '@angular/common' : 'https://unpkg.com/@angular/common@4.1.0',
        '@angular/compiler' : 'https://unpkg.com/@angular/compiler@4.1.0',
        '@angular/platform-browser' : 'https://unpkg.com/@angular/platform-browser@4.1.0',
        '@angular/platform-browser-dynamic' : 'https://unpkg.com/@angular/platform-browser-dynamic@4.1.0'
}
});
System.import('main.ts');
</script>

shim.min.js -> 클래스 데코레이터를 사용하기 위해 폴리필을 로드

zone.js -> angular의 변화 감지 메커니즘

system.src.js -> 모듈 로더 systemjs 로드

typescript -> 타입스크립트 컴파일러 로드 (프로젝트에는 ts로 포함된 파일을, 웹상에서 컴파일한다.)

- main.ts 코드

import { Component } from '@angular/core';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
// 컴포넌트 선언
@Component({
    selector : 'hello-world',
    template : '<h1>Hello {{ name }}!</h1>'
})
class HelloWorldComponent {
    name : string;
 
    constructor () {
        this.name = 'Angular';
    }
}
 
 
// 모듈 선언
@NgModule({
    imports : [BrowserModule],
    declarations : [HelloWorldComponent],
    bootstrap : [HelloWorldComponent]
})
export class AppModule {}
 
// 부트스트랩
platformBrowserDynamic().bootstrapModule(AppModule)