[AngularJs2] AngularJs2의 구조 - AngularJs2 architecture

AngularJs2의 구조 - AngularJs2 architecture

1. AngularJs2의 아키텍처

1) 컴포넌트

- AngularJs는 컴포넌트 중심으로 개발

- 템플릿(컴포넌트UI) + 클래스로 구성 된다

- 컴포넌트는 자식 컴포넌트를 포함하거나 다른 컴포넌트로 URL을 라우팅 할 수 있다

- 포함시 자식 컴포넌트 지시자를 현재 컴포넌트의 템플릿에 입력함으로 포함

A. 템플릿

- UI는 별도의 가상 DOM에 저장되고 컴포넌트마다 가상 DOM을 이용하므로 컴포넌트 간의 스타일 영향 받지 않는다

- 템플릿은 선언적 템플릿방식으로 지시자와 템플릿 문법을 활용해 개발

B. 클래스

- 컴포넌트 로직을 관리

- 템플릿과 클래스는 바인딩으로 연결되어 있다

2) 모듈

- 컴포넌트의 기능을 더하는 방법으로 모듈을 사용

- 내장모듈과 커스텀모듈이 있다

- 작성한 컴포넌트에서 모듈을 불러온다

3) 서비스 

- 컴포넌트 내부의 중복 로직 코드를 최소화 하기 위해 사용

- 서비스를 컴포넌트에 주입시 DI를 이용

- 클래스인 서비스를 객체로 만들어 클래스에 제공(DI)