라우팅 규칙 정의하기

이제 Angular Router를 사용할 준비가 되었기 때문에, 라우팅 규칙(route)을 정의해야 합니다.

참고: 자세한 내용은 기본 라우팅 규칙 정의하기 심화 가이드 문서를 참고하세요.

이번 예제에서는 라우팅 규칙을 어떻게 정의하는지 알아봅시다.

1. Define a route in app.routes.ts

   예제 앱에는 표시할 화면이 (1) 홈 화면과 (2) 사용자 화면 이렇게 2개 있습니다.

   라우팅 규칙을 정의하려면 app.routes.ts 파일의 routes 배열에 라우팅 규칙 객체를 추가하면 됩니다. 이 객체에 필요한 프로퍼티는 이렇습니다:

   • path - 최상위 경로(ex. /)로 시작하는 경로
   • component - 라우팅 규칙이 매칭되었을 때 표시할 컴포넌트

         
   import {Routes} from '@angular/router';import {Home} from './home/home';export const routes: Routes = [  {    path: '',    component: Home,  },];
       

   위 코드는 Home 컴포넌트를 추가하는 라우팅 규칙을 정의한 예제 코드입니다. 이제 User 컴포넌트를 라우팅 규칙으로 추가해 봅시다.

   'user' 경로로 연결하면 됩니다.

2. 라우팅 규칙에 제목을 추가합니다

   Angular Router를 사용하면 라우팅 규칙을 정확한 규격으로 정의할 수 있으며, title 프로퍼티를 사용해서 라우팅 규칙마다 화면 제목을 지정할 수 있습니다.

   app.routes.ts 파일에서 기본 라우팅 규칙(path: '')에 title 프로퍼티를 추가해보고, user로 연결되는 라우팅 규칙도 추가해 봅시다. 이렇게 작성하면 됩니다:

         
   import {Routes} from '@angular/router';import {Home} from './home/home';export const routes: Routes = [{path: '',title: 'App Home Page',component: Home,},];
       

이번 예제에서는 Angular 앱에 라우팅 규칙을 선언하고 추가하는 방법을 알아봤습니다. 잘 하셨습니다. 🙌

라우팅 준비작업이 거의 다 되었습니다. 계속 진행해 봅시다.