[Angular] Angular Arichitecture

 

 

 

 

Angular 애플리케이션을 구성하는 기본 요소와 그 구조를 알아보자.

 

1. 모듈(Module)

Angular 애플리케이션을 실습하다보면 가장 익숙한 것은 NgModule 이다. NgModule은 비슷한 기능을 하나로 묶어 관리하기 쉽도록 만든 모듈이다. 그렇다면 Angular에서 NgModule은 어떻게 이루어져 있을까?

 

아래 파일은 Angular에서 최상위 모듈을 뜻하는 AppModule이다. 

AppModule

여기서는 Angular 애플리케이션에서 사용하는 컴포넌트, 모듈 등을 선언한다. declarations와 imports에 포함된 컴포넌트와 모듈들은 튜토리얼을 따라하면서 추가된 것으로, 실제로 초기에는 이렇게 많지 않다 ^^;

 

AppModule에서 다른 모듈을 사용한 것처럼, NgModule에서도 다른 NgModule을 불러오거나 다른 모듈에 공개할 수 있다.

 

 

2. 컴포넌트(Component)

위 파일은 Angular 튜토리얼을 따라하면서 만든 컴포넌트들 중 하나이다. 일반적으로 컴포넌트는 컴포넌트 클래스와 템플릿으로 구성되어 있다.

 

Angular 컴포넌트를 선언하려면, '@Component' 를 선언해야 한다. 이 때, Angular 'core' 라이브러리에서 Component 심볼을 import 해야 한다.

 

Angular CLI는 기본적으로 3개의 메타데이터 프로퍼티를 생성한다.

(1) selector

- 컴포넌트의 CSS 엘리먼트 selector (위 예시를 보면 seletor가 'app-dashboard'로 되어있는데, 이는 다른 템플릿에서 해당 컴포넌트를 사용할 때 <app-dashboard />로 사용해야한다는 뜻이다.)

 

(2) templateUrl

- 컴포넌트 템플릿 파일의 위치(주로 html 파일)

 

(3) styleUrls

- 컴포넌트 css 파일의 위치

 

 

3. 서비스(Service)

Angular에서 컴포넌트는 데이터를 표시하는데 집중하고, 데이터를 처리하는 로직은 서비스에서 처리하도록 한다. 서비스 파일을 이용하면 데이터를 가져오는 곳이 변경되더라도 컴포넌트에 따로 수정을 할 필요가 없다.

 

서비스 파일 생성은 ng generate service 서비스명 으로 생성한다.

service.ts

@injectable() 데코레이터는 이 클래스가 의존성 주입(DI) 시스템에 포함되는 클래스라고 선언하는 것이다. 그리고 @injectable() 데코레이터가 등록된 클래스가 실제로 사용되지 않으면, 이 클래스를 최종 빌드 결과물에서 제거하는 대상으로 등록하는 역할도 한다.

 

'provideIn'은 서비스를 의존성 주입(DI) 시스템에 사용하기 위해 프로바이더를 등록하는 것으로 보면 된다. 여기서 'root'는 최상위 인젝터에 등록하도록 기본으로 설정된다. 서비스가 최상위 인젝터에 등록되면 Angular는 해당 서비스의 인스턴스를 하나만 생성하며, 이 클래스가 주입되는 모든 곳에서 같은 인스턴스를 공유한다.

 

 

4. 라우팅(Routing)

화면 전환, 페이지 이동을 할 때 라우팅을 이용하는데 Angular에서는 Router NgModule을 사용한다. 

 

Angular CLI로 라우팅 모듈을 만드는 방법은 아래와 같다.

ng generate module app-routing --flat --module=app

 

--flat : 새로운 폴더를 만들지 않고 src/app 폴더에 파일을 생성한다.)

--module=app : Angular CLI가 이 라우팅 모듈을 AppModule의 imports 배열에 자동으로 추가한다.

 

라우팅 파일은 아래와 같다. 이 파일도 튜토리얼을 따라하면서 몇 가지 컴포넌트들이 추가되었다.

일반적으로 라우팅 모듈에서 컴포넌트를 등록하지 않기 때문에 CommonModule은 주석 처리를 했다.

라우터는 '@angular/router' 라이브러리에서 'RouterModule'과 'Routes'을 import해서 사용한다.

그리고 @NgModule에 exports 배열을 추가해서 RouterModule을 등록했는데, 이는 AppModule 범위에 있는 모든 컴포넌트에 라우터와 관련된 디렉티브를 사용할 수 있도록 한다.

 

 

라우팅 규칙 추가하기

사용자가 링크를 클릭하거나 브라우저에 URL 주소를 입력했을 때, 어떤 화면을 표시할지는 라우팅 규칙으로 정의한다.

 

Route에는 두 가지 프로퍼티가 존재한다.

- path : 브라우저 주소표시줄의 URL과 매칭될 문자열을 지정한다.

- component : 이 라우팅 규칙이 적용될 때 표시할 컴포넌트를 지정한다.

 

위 예시를 참고하면 path가 /heroes 일 때, HeroesComponent 화면을 보여준다.

 

라우팅 규칙을 적용하려면 브라우저에서 주소가 변경되는 것을 감지하기 위해 라우터를 초기화해야 한다. 이 때  RouterModule.forRoot(routes)를 사용하면 이전에 정의한 routes를 인자로 전달한다.

 

 

 

 

참고 사이트 : https://angular.kr/