※ 참고 : 책 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 |
'SW개발 > Etc' 카테고리의 다른 글
| [React Native] 안드로이드 기본 앱 개발 #2 (expo 플랫폼 사용, apk 작성, 배포) (2) | 2017.09.30 |
|---|---|
| [React Native] 안드로이드 기본 앱 개발 #1 (expo 플랫폼 사용) (1) | 2017.09.30 |
| [reactjs] firebase 에서 react.js 웹 호스팅하기 (0) | 2017.09.26 |
| [reactjs] html 파일 위에서 react.js 웹 간단하게 시작하기 (0) | 2017.09.14 |
| angular 웹개발 (ecplise, spring boot, typescript) - #2 (0) | 2017.08.30 |
| angular 웹개발 (ecplise, spring boot, typescript) - #1 (0) | 2017.08.26 |
| 이클립스 maven remote catalog 주소 (0) | 2017.05.31 |
| Google Cloud Datastore 사용하기(spring) (0) | 2017.05.31 |
| Visual Studio Code에서 TypeScript 코딩하기 (0) | 2017.05.09 |
| [Perl] linux command 결과를 받아오기 (0) | 2016.03.11 |
| [Perl] signal 관리 (perlipc) (0) | 2015.10.21 |
