Angular 튜토리얼 2

Github

라우팅(Routing)

첫번째 Angular 앱을 끝낸 시점에 우리가 만든 온라인 쇼핑몰 애플리케이션에는 간단한 제품 목록만 존재합니다. 그래서 아직까지 앱의 상태를 관리하거나 네비게이션하는 기능은 없습니다. 앱이 동작하는 URL은 하나뿐이고, 이 URL에서는 언제나 제품의 목록과 간단한 설명을 표시하는 "My Page" 페이지만 표시됩니다.

이번 섹션에서는 제품에 대한 상세정보를 표시하는 화면을 만들어 봅시다. 이 페이지가 표시되는 URL도 새로 할당할 것입니다.

이렇게 구현하려면 Angular 라우터(router)를 사용하면 됩니다. 라우터를 사용하면 사용자가 접속한 주소에 어울리는 컴포넌트와 데이터를 사용자에게 보여줄 수 있습니다. 라우터는 다음과 같은 경우에 동작합니다

• 주소표시줄에 URL을 새로 입력해서 새로운 페이지로 이동할 때

• 페이지에 있는 링크를 클릭해서 새로운 페이지로 이동할 때

• 브라우저의 뒤로가기, 앞으로 가기 버튼을 눌러서 브라우저 히스토리에 있는 페이지로 이동할 때

 

라우팅 규칙(route) 등록하기

지금까지 만든 앱은 이미 Angular 라우터를 사용할 준비가 되어있고, 제품 목록 컴포넌트도 이 라우터를 활용해서 표시되고 있습니다. 이제 제품 상세정보 화면으로 전환하는 라우팅 규칙을 추가해 봅시다.

 

1. 제품 상세정보 컴포넌트를 생성합니다. 컴포넌트의 이름은 product-details로 합니다.

리마인드: 파일 목록의 app 폴더에 마우스 오른쪽 버튼을 클릭하고 Angular Generator를 선택한 후에 Component를 선택하면 됩니다.

 

2. app.module.ts 파일에 제품 상세정보에 해당하는 라우팅 규칙을 추가합니다. RouterModule을 로드하는 곳에 새로운 path를 추가하고 ProductDetailsComponent를 다음과 같이 지정합니다.

src/app/app.module.ts

@NgModule({
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    RouterModule.forRoot([
      { path: '', component: ProductListComponent },
      { path: 'products/:productId', component: ProductDetailsComponent },
    ])
  ],

 

라우팅 규칙은 URL과 컴포넌트를 연결하는 규칙을 의미합니다.

 

3.RouterLink 디렉티브를 사용해서 링크를 연결합니다. routerLink를 사용하면 사용자가 템플릿에서 원하는 방식으로 페이지를 전환할 수 있습니다.

지금은 사용자가 제품 이름을 클릭했을 때 페이지를 전환하려고 합니다.

• product-list.component.html 파일을 엽니다.

• 제품 목록이 저장된 products 배열을 *ngFor 디렉티브로 순회할 때 인덱스 변수가 할당되는데, 이 인덱스를 제품 ID로 사용하도록 수정합니다.

• 제품 이름을 표시하는 앵커에 routerLink 디렉티브를 다음과 같이 추가합니다.

 

src/app/product-list/product-list.component.html

<div *ngFor="let product of products; index as productId">

  <h3>
    <a [title]="product.name + ' details'" [routerLink]="['/products', productId]">
      {{ product.name }}
    </a>
  </h3>
<!-- . . . -->
</div>

앵커 엘리먼트에 RouterLink 디렉티브를 사용하면 앵커 엘리먼트 원래의 역할보다 Angular 라우터의 역할이 우선 처리됩니다. 그리고 이 예제에서는 RouterLink 디렉티브에 연결된 라우팅 규칙은 고정된 URL(/products)과 *ngFor에서 반복되는 변수(productId)로 구성됩니다. 그래서 /products/1와 같은 URL이 있다면 이 URL은 ID가 1인 제품의 상세정보를 표시하는 화면을 의미한다고 할 수 있습니다.

 

4. 제품 이름을 클릭해서 라우터가 동작하는 것을 확인해 보세요. 링크를 클릭하면 제품 상세정보 컴포넌트가 표시되지만, 아직까지는 항상 "product-details works!"라는 문구만 표시될 것입니다. (이 문구는 다음 섹션에서 수정합니다.)

미리보기 창에 있는 URL이 변경된 것을 확인해 보세요. URL은 products/1으로 끝납니다.

 

 

라우팅 규칙 활용하기

제품 상세정보 컴포넌트는 각 제품에 대한 설명을 표시하는 컴포넌트입니다. 그리고 Angular 라우터는 브라우저의 URL과 해당 URL에 연결된 라우팅 규칙을 기반으로 컴포넌트를 표시합니다. 이번에는 products 데이터와 라우팅 규칙을 활용해서 원하는 제품의 상세정보를 표시해 봅시다.

1. product-details.component.ts 파일을 엽니다.

2. 외부 파일에서 제품 데이터를 가져옵니다.

• @angular/router 패키지에 있는 ActivatedRoute를 로드합니다. 그리고 ../products 파일에서 products 배열을 로드합니다.

src/app/product-details/product-details.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import { products } from '../products';

• product 프로퍼티를 선언하고 컴포넌트 클래스의 생성자에 ActivatedRoute를 의존성으로 주입합니다.

src/app/product-details/product-details.component.ts

export class ProductDetailsComponent implements OnInit {
  product;

  constructor(
    private route: ActivatedRoute,
  ) { }

}

ActivatedRoute은 Angular 라우터가 컴포넌트를 로드할 때 사용한 라우팅 규칙을 의미합니다. 이 객체에는 현재 사용된 라우팅 규칙, 라우팅 변수 등의 데이터가 들어있습니다.

 

3. ngOnInit() 메소드에서 라우팅 변수를 구독(subscribe) 한 후에 옵저버에서 productId를 참조합니다.

ngOnInit() {
  this.route.paramMap.subscribe(params => {
    this.product = products[+params.get('productId')];
  });
}

라우팅 변수는 라우팅 규칙에 사용된 path 변수에 따라 달라집니다. 그리고 이 예제에서는 위에서 정의한 라우팅 규칙에 따라 productId가 라우팅 변수로 사용되었습니다. productId 변수는 특정 제품을 구분하는 용도로 사용합니다.

 

4. 템플릿에서 제품의 상세정보가 표시되는 영역을 *ngIf로 감쌉니다.

src/app/product-details/product-details.component.html

<h2>Product Details</h2>

<div *ngIf="product">
  <h3>{{ product.name }}</h3>
  <h4>{{ product.price | currency }}</h4>
  <p>{{ product.description }}</p>

</div>

이제 사용자가 제품 목록에서 제품 이름을 클릭하면 라우터가 동작하면서 해당 제품에 해당하는 URL로 이동하는데, 이 때 화면에는 제품 목록 컴포넌트 대신 제품 상세정보 컴포넌트가 표시됩니다.