[KOSTA] Angular 활용(Spring Boot 와 Angular 연동)

Angular 활용(Spring Boot 와 Angular 연동)

* c:\boot_angular 생성

- 실습프로젝트를 진행하기 위한 폴더

* blog.naver.com/vega2k 에서 angular 파일을 다운로드

- 실습용 파일 다운로드

* jdk8 버전 설치 확인

c:\Program Fifles\java\jdk1.8.0_161 폴더 확인

* Spring Tool Suite-3.9.4 설치

- https://spring.io/tools

- 설치 위치는 c:\boot_angular\sts-bundle\ 에 설치한다.

- workspace 지정 : c:\boot_angular\workspace

- tomcat 을 add server

* node.js-8.11.1 설치

- node 에 있는 npm 이 필요함

- > npm --version

- > npm --version

* WebStorm 2018.1.4 설치

- https://search.naver.com/search.naver?sm=tab_hty.top&where=nexearch&query=webstorm&oquery=spring+tools&tqi=Tx3vbwpVuEKssZdfnjdssssst5C-241480

* angular 설치

- http://angular.io

- https://angular.io/api/  API 문서

- https://cli.angular.io/  어플리케이션을 작성하기 쉽도록 해준다

  > ng new  // 프로젝트 생성

  > ng generate  // 코포넌트, 라우터, 서비스, 파이프 등이 생성됨

  > ng serve       // 내부적인 개벌 서버를 띄움

* typescript 설치

- http://www.typescriptlang.org/

- web storm 에서 terminal 창으로 들어간다.

- > npm install -g typescript

- Playground

  브라우저에서 typescript 를 작성하고 변환된 javascript 를 확인할 수 있다.

  이더리움 개발언어인 remix 도 유사함  https://remix.ethereum.org

* typescript 언어

- let : 값 지정

- 

* ECMA 스크립트에 대하여

- ECMA 스크립트는 ECMA International 의 표준

  최초 ECMA 스크립트는 브라우저 언어인 Javascript 와 Jscript 간 차이를 줄이기 위한 공통 스펙 제안으로 출발(1997, ECMA-262)

- ECMA International 은 전세계적인 표준기관

  유렵 컴퓨터 제조협회로부터 기원함

    ECMA

  C#, JSON, Dart 를 포함한 많은 언어 표준을 관리함

* typescript 컴파일 및 실행

- tsc hello.ts        // ts 파일을 컴파일하여 js 파일을 생성

- node hello.js     // 컴파일 된 js 파일을 실행

* Angular CLI 설치

- npm install -g @angular/cli

* Angular 프로젝트 생성

- ng new my-project

- cd my-project

- ng serve      // http://localhost:4200 서버 생성됨

* Angular 프로젝트 실습

- ng new boot-angular-app

- cd boot-angular-app

- ng server     // http://localhost:4200 서버 생성됨

- package.json : 모듈 dependencies

  dependencies : 실행시 사용 모듈

  devDependencies " 개발시 사용 모듈

  rxjs : 비동기 통신을 위한 observable 객체 모듈

  jasmine : 단위테스트 모듈

  karma : 단위테스트 모류

- tsconfig.json

  typescript 컴파일러 옵션을 정의한 것이다

- angular.json

  angular 옵션을 정의한 것이다

  index :

  main :

  assets : 이미지 등을 정의

  styles : 전체 화면의 스타일을 정의

- http://localhost:4200

  1. index.html (main.js -> app.module.ts(AppModule 클래스) -> app.component.ts(AppComponent 클래스)

  2. main.js

  3. bootstrap

  4. app

* Angular 콤포넌트 구성 요소

1. app.component.ts

2. app.component.html

3. app.component.css

- ng generate component user-list 를 하면 아래의 3개의 파일이 생성된다.

  user-list.component.ts

  user-list.component.html

  user-list.component.css

- component 는 모듈에 등록해서 사용한다

- 모듈이 많아지면 분류화해서 사용할 수 있다

- 공통 모듈은 ModuleService 형태로 구성해서 사용한다

* Directive

- 화면을 동적으로 처리한다

* Spring Boot REST Service

- http://start.spring.io/ 에서 프로젝트 생성

  Spring initializer

  Maven Project - Java - Spring Boot 2.0.2

  Group : myspringboot.hero

  Artifact : boot_angular6

  Dependencis :  Web - Fullstack web

  Generate Project --> boot_angular6.zip 파일을 다운로드한다. workspace 에 다운로드하고 압축해제한다.

- STS 에서 boot_angular6 프로젝트를 open 한다.

* ReactiveX

- http://reactivex.io/

- Ajax 와 같은 비동기적 통신

- observable 객체를 사용

- observable 을 angular 가 내부적으로 사용함

- observable 을 사용하기 위해 rxjs 모듈을 필요로 함

* vue.js

- https://velopert.com/

- Vue.js 는 가상 DOM 을 사용하고, 읽기 전용으로 view 가 빠르다.

- Angular 는 속도가 빠르지는 않다.

* STS 프로젝트 생성

* pom.xml 수정

- packaging : jar => war

- dependency 에 tomcat 추가

- Maven update project

* tomcat library 추가

- BuildPath -> Configure Build Path -> Libraries

  - Add Library -> Server Runtime -> Tomcat 8.5 -> Finish

* Project Property

  - Project Fact

    Cloud Foundry : 해제

    Dynamic Web Module : 설정

  - Web Project Settings

    boot_angular6 => / 로 변경

* Model Class 작성

- src/main/java/myspringboot/hero/Hero.java

- Hero()

- Hero(id, name)

- get / set

* Controller Class 작성

- src/main/java/myspringboot/hero/HeroController.java

- @RestController 설정

<-->