앵귤러는 단일 페이지 애플리케이션(SPA)을 개발하는 동안 라우팅을 구현하는 기능을 제공합니다. 라우팅은 사용자가 애플리케이션 내에서 다른 뷰로 이동하도록 하는 것을 의미합니다. 이를 통해 다중 페이지 애플리케이션을 구현하는 것과 유사한 사용자 경험을 제공할 수 있습니다.

앵귤러 라우팅 모듈

앵귤러에서는 @angular/router 모듈을 사용하여 라우팅을 구현합니다. 이 모듈은 여러 가지 라우팅 기능을 제공하며, 라우팅을 설정하는데 필요한 클래스와 인터페이스를 포함하고 있습니다.

라우터 설정

라우터는 애플리케이션 내에서 경로와 컴포넌트를 매핑하는 역할을 합니다. 앵귤러에서는 RouterModule를 사용하여 라우터를 설정합니다.

import { RouterModule, Routes } from '@angular/router';

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

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

위의 코드에서는 루트 모듈(AppModule)에서 AppRoutingModule을 import하고, RouterModule.forRoot() 메소드를 사용하여 애플리케이션의 라우팅을 설정하고 있습니다. routes 배열에는 경로와 컴포넌트를 매핑하는 정보가 담겨 있습니다.

위의 코드에서는 루트 경로인 '/'에 HomeComponent를 매핑하고, 'about' 경로에는 AboutComponent, 'contact' 경로에는 ContactComponent를 매핑하고 있습니다.

네비게이션

앵귤러에서는 Router 서비스를 사용하여 라우터를 제어하고, 다른 뷰로 네비게이션을 수행할 수 있습니다. Router 서비스는 DI(Dependency Injection)를 통해 주입받아 사용합니다.

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

@Component({
  selector: 'app-navbar',
  template: `
    <nav>
      <ul>
        <li><a routerLink="/">Home</a></li>
        <li><a routerLink="/about">About</a></li>
        <li><a routerLink="/contact">Contact</a></li>
      </ul>
    </nav>
  `,
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent {
  constructor(private router: Router) { }
}

위의 코드에서는 NavbarComponent에서 Router 서비스를 주입받아 사용합니다. 그리고 <a> 태그에 routerLink 디렉티브를 사용하여 다른 뷰로 네비게이션하는 링크를 생성합니다.

참고 자료

• 앵귤러 공식 문서
• 앵귤러 라우팅 예제 코드