프로젝트 기본 설정 (angular-cli 없이)
PROJECT
main.ts
index.html
components
app.component.ts
app.component.html
app.module.ts
index.html
<!doctype html>
<html lang="ko">
<head>
<script src="https://unpkg.com/[email protected]/client/shim.min.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]/dist/system.src.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script>
System.config({
transpiler: 'typescript',
map: {
'rxjs': 'https://unpkg.com/[email protected]',
'@angular/core': 'https://unpkg.com/@angular/[email protected]',
'@angular/common': 'https://unpkg.com/@angular/[email protected]',
'@angular/compiler': 'https://unpkg.com/@angular/[email protected]',
'@angular/platform-browser': 'https://unpkg.com/@angular/[email protected]',
'@angular/platform-browser-dynamic': 'https://unpkg.com/@angular/[email protected]'
}
});
System.import('main.ts');
</script>
</head>
<body>
<app-root></app-root>
</body>
</html>
cdn 을 통해서 앵귤러 프로젝트에 필요한 패키지들을 index 페이지에 로드한다.
- zone.js : 앵귤러의 변화 감지 메커니즘에 사용
- system.js : 모듈 로더
- typescript : javascript 로 트랜스파일 하기 위해서 컴파일러 로드
- system.js 모듈 로더가 동작하는 환경 설정
- system.js 동작에 필요한 패키지를 cdn 에서 가져오도록 설정
- 메인 모듈을 실행하도록 main.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: 'app-root',
template: '<h1>앵귤러 뼈대 구축하기 {{ title }}</h1>'
})
export class AppComponent {
title: string;
constructor() {
this.title = '170829' ;
}
}
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);