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


# typescript가 포함된 웹 기본 실행


- 이클립스 준비 (Oxygen)

- Spring starter project 생성 + web 선택

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


- index.html 코드 일부

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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>

cs


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

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

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

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


- main.ts 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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)
cs










Posted by sbahn


티스토리 툴바