Angular에서 경로 구성하기

이 단원에서는 뷰 사이를 이동하고 앱의 URL을 관리하는 방법인 Angular 라우팅을 소개합니다.

라우팅이란 무엇인가요?

라우팅을 사용하면 URL을 기준으로 Angular 애플리케이션의 여러 컴포넌트나 페이지 사이를 이동할 수 있습니다.

라우팅 모듈 설정하기

프로젝트를 시작할 때 라우팅 모듈을 만들거나, 나중에 Angular CLI를 사용하여 만들 수 있습니다:

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

경로 정의하기

경로는 컴포넌트에 연결된 경로 배열로 정의합니다:

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

라우터 출력 영역

<router-outlet></router-outlet>을 사용하면 경로에 따라 일치하는 컴포넌트를 동적으로 렌더링할 수 있습니다.

<router-outlet></router-outlet>

routerLink로 이동하기

routerLink 지시문을 사용하여 뷰 사이를 이동하세요:

<a routerLink="/home">Home</a>

프로그래밍 방식으로 이동하기

Router 서비스를 사용하여 프로그래밍 방식으로 이동할 수도 있습니다:

this.router.navigate(['/home']);

와일드카드 경로

와일드카드 경로를 사용하여 정의되지 않은 경로를 처리하고 사용자 지정 404 페이지를 표시하세요:

{ path: '**', component: PageNotFoundComponent }

요약

이제 라우팅의 기본 사항을 이해했으며 Angular 앱에서 경로를 효과적으로 구성할 수 있습니다. 잘하셨습니다!