# 목표

- 이클립스에서 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
- index.html 을 static/src/index.html 에 생성하고, application.properties 에서 src를 static-locations로 잡아줬기 때문에, 웹을 접속하면, index.html 이 자동으로 로딩된다. (http://localhost 접속 시, index.html 페이지 자동 호출됨)

- <hello-world> 라는 angular 엘리먼트가 선언되어 있다.

## system.confing.js
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 배포


Posted by sbahn


티스토리 툴바