Angular는 싱글 페이지 애플리케이션 (SPA)을 구축하는 데 매우 강력한 프레임워크입니다. 라우팅은 Angular 애플리케이션을 다양한 페이지로 이동하기 위한 핵심 기능 중 하나입니다. Angular에서는 @angular/router 모듈을 사용하여 라우팅을 구현할 수 있습니다.

라우팅 모듈 설정

먼저, 애플리케이션에서 라우팅을 사용하기 위해서는 AppRoutingModule과 같은 라우팅 모듈을 설정해야 합니다.

// app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

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

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

위의 코드에서 Routes 배열을 사용하여 각 경로에 대한 컴포넌트를 정의합니다. 그리고 RouterModule.forRoot(routes)를 호출하여 라우팅 모듈을 설정합니다.

라우터 아웃렛

라우터 아웃렛은 <router-outlet> 태그를 사용하여 라우팅 컴포넌트가 렌더링될 위치를 지정하는 역할을 합니다.

<!-- app.component.html -->

<router-outlet></router-outlet>

위의 코드는 애플리케이션의 루트 컴포넌트 템플릿에 <router-outlet>을 추가하는 예시입니다.

네비게이션

라우터를 사용하여 다른 페이지로 이동하려면 Router 서비스를 주입하고 navigateByUrl 또는 navigate 메서드를 사용할 수 있습니다.

// example.component.ts

import { Router } from '@angular/router';

export class ExampleComponent {
  constructor(private router: Router) {}

  goToAboutPage() {
    this.router.navigate(['/about']);
  }
}

위의 코드에서 Router 서비스를 주입하고 navigate 메서드를 사용하여 /about 경로로 이동합니다.

이제 Angular 애플리케이션에서 기본적인 라우팅을 설정하고 사용하는 방법에 대해 알아보았습니다. 더 복잡한 기능들을 다루기 위해서는 Angular 라우팅 공식 문서를 참고하시기 바랍니다.