# 목표
- 이클립스에서 angular 웹개발하기(typescript, spring boot 사용)
- typescript 코딩, 컴파일, spring boot 웹 띄우기 등등.
- 최종 jar 배포
# 환경
- 이클립스 oxygen 버전
- Jdk1.8
- 이클립스 플러그인 STS
- 이클립스 플러그인 'Angular Eclipse 1.3.0 by Angelo ZERR'
※ 개발 프로젝트 구조 및 배포 구조는 아직 이상한(?) 내맘대로 구조이다.ㅠㅠ(일단 돌아가는것으로 만족)
# 시작 (요약?)
- 프로젝트 생성 : new project -> spring starter project(maven, jar, java1.8) -> dependency 'Web' 추가
- src/main/resources/static/src/index.html 작성
- src/main/resources/static/src/system.config.js 작성
- src/main/resources/static/tsconfig.json 작성 (typescript 컴파일, 배포를 위한)
- src/main/resources/static/pacakage.json 작성 (js 라이브러리를 받기 위한 의존성 리스팅)
- src/main/resources/src/app/main.ts 작성
- src/main/resources/application.properties 작성
- npm update를 통해 js 라이브러리를 다운
- 타입스크립트 컴파일
- Spring Boot Start -> 로컬 웹 테스트
- Maven 빌드 -> jar 배포 -> 배포 웹 테스트
## index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>angular web home</title> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('app').catch(function(err) { console.error(err); }); </script> </head> <body> This is home page<br/> <hello-world></hello-world> </body> </html> | cs |
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 30 31 32 33 34 35 36 37 38 39 | System.config({ traspiler : 'typescript', paths : { 'npm:' : 'node_modules/' }, // map tells the System loader where to look for things map : { '@angular' : 'npm:@angular', 'rxjs' : 'npm:rxjs', '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js', '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js', '@angular/core': 'npm:@angular/core/bundles/core.umd.js', '@angular/common': 'npm:@angular/common/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'npm:@angular/http/bundles/http.umd.js', '@angular/router': 'npm:@angular/router/bundles/router.umd.js', '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js', '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js', '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js', }, // packages tells the System loader how to load when no filename and/or no extension packages: { app: { main: './main.js', defaultExtension: 'js', }, rxjs: { main: 'Rx', defaultExtension: 'js' } } }); | cs |
- 아마도 systemjs(모듈 로더?) 가 참고하는 config 파일?
- 필요한 라이브러리를 선언한다. typescript에서 갖다쓰기 위해.
- 여기서 선언된 라이브러리들은 package.json 을 통해 다운받은 라이브러리들이다.
## tsconfig.json
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 | { "compileOnSave": false, "compilerOptions": { "module": "commonjs", "watch": true, "sourceMap": true, "declaration": false, "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, "target": "es5", "typeRoots": [ "node_modules/@types" ], "lib": [ "es2016", "dom" ], "allowUnreachableCode": false, "strictNullChecks": false, "outDir": "./dist", "rootDir": "src" }, "buildOnSave": false, "exclude": ["node_modules"] } | cs |
- tsconfig.json 은 타입스크립트를 컴파일하는데 참조되는 설정파일이다.
- 이클립스에서 angular 플러그인을 설치했기 때문에,
tsconfig.json 파일 -> 우클릭 -> Runs as -> Compile Typescript 를 선택하면 ts 파일들이 컴파일된다.
- watch 값을 true로 하면, 실시간으로 수정된 ts가 컴파일된다.
## package.json
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 30 31 32 33 | { "name": "angular-web", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "MIT", "dependencies": { "@angular/common": "^4.0.0", "@angular/compiler": "^4.0.0", "@angular/core": "^4.0.0", "@angular/forms": "^4.0.0", "@angular/http": "^4.0.0", "@angular/platform-browser": "^4.0.0", "@angular/platform-browser-dynamic": "^4.0.0", "@angular/router": "^4.0.0", "angularfire2": "^4.0.0-rc.1", "bootstrap": "^3.3.7", "core-js": "^2.4.1", "firebase": "^4.1.5", "jquery": "^3.2.1", "promise-polyfill": "^6.0.2", "rxjs": "^5.4.1", "systemjs": "^0.19.39", "traceur": "0.0.111", "zone.js": "^0.8.17" }, "devDependencies": {} } | cs |
- src/main/resources/static 위치에서 해당 파일을 작성하고, npm update 를 수행하면 라이브러리들이 node_modules에 다운로드된다.
- npm 은 node 명령어이므로, 개발환경에 nodejs를 설치해야한다.
## 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 | 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 - |
- typescript 로 작성된 Angular 코드이다. src/app/main.ts 로 작성됐지만, 컴파일 후에는 dist/app/main.js 로 배포되도록 tsconfig.json 에 설정하였다. (소스 ts파일과 컴파일된 js파일을 분리하여 관리하기 위해)
## application.properties
1 | spring.resources.static-locations=classpath:/static/,classpath:/static/src/,classpath:/static/dist/,classpath:/static/node_modules/ | cs |
- 스프링 부트에서 참고할 statis resource의 위치를 설정해준다.
- dist에 배포되는 js 파일과, src 하위의 html 파일, js 라이브러리인 node_modules 등을 지정해주었다.
- 스프링 부트에서의 디폴트 statis 리소스는, resources/statis, resources/public, resources/template 이다.(~였던것 같다.)
## 프로젝트 구조
-----------------------------------------------------------------------------------
# 정리
- 웹 실행 : 프로젝트 -> run -> Spring boot app
- tsconfig.json 에서 run -> Compile Typescript (watch 컴파일 모드) 로 컴파일을 걸어놓고,
- ts 파일 코딩 및 기타 코딩 -> 자동으로 dist 로 배포되고, 프로젝트에 F5를 해주고 js 리로드
- 최종 배포는 mvn clean package 로 실행 -> jar 배포
