angular-routing은(는) 무엇을 하나요?
Angular v20+ 애플리케이션에서 지연 로딩, 함수형 가드, 리졸버, 라우트 파라미터를 사용한 라우팅을 구현합니다. 네비게이션 설정, 보호된 라우트 생성, 라우트 기반 데이터 로딩, 중첩 라우팅 구조에 사용됩니다. 다음 작업에서 트리거됩니다: 라우트 구성, 인증 가드 추가, 지연 로딩 구현, 신호(signals)를 사용한 라우트 파라미터 읽기.
주요 기능
- 지연 로딩(Lazy Loading):
loadComponent와loadChildren을 사용하여 필요한 시점에 모듈과 컴포넌트를 로드 - 함수형 가드(Functional Guards): 클래스 기반이 아닌 함수 형태의
canActivate,canMatch,canActivateChild가드 지원 - 리졸버(Resolvers): 라우트 진입 전 데이터를 미리 로드하는 함수형 리졸버
- 라우트 파라미터:
ActivatedRoute와 신호 기반 파라미터 처리 - 중첩 라우팅: 자식 라우트와 함께하는 계층적 네비게이션 구조
사용 예시
기본 라우트 설정
import { Routes } from '@angular/router';
import { authGuard } from './guards/auth.guard';
export const routes: Routes = [
{
path: 'dashboard',
loadComponent: () => import('./dashboard/dashboard.component'),
canActivate: [authGuard],
resolve: {
userData: () => inject(UserService).getUserData(),
},
},
{
path: 'items',
loadChildren: () => import('./items/items.routes'),
},
];
함수형 가드 예시
import { inject } from '@angular/core';
import { CanActivateFn, Router } from '@angular/router';
export const authGuard: CanActivateFn = (route, state) => {
const authService = inject(AuthService);
const router = inject(Router);
if (authService.isLoggedIn()) {
return true;
}
return router.createUrlTree(['/login'], { queryParams: { returnUrl: state.url } });
};
신호로 라우트 파라미터 읽기
import { Component, inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { toSignal } from '@angular/core/rxjs-interop';
import { map } from 'rxjs';
@Component({
template: `<h1>항목 {{ id() }}</h1>`,
})
export class ItemComponent {
private route = inject(ActivatedRoute);
id = toSignal(this.route.paramMap.pipe(map(params => params.get('id'))), { initialValue: '' });
}
관련 명령어
ng generate guard <name>— 새 가드 생성ng generate resolver <name>— 새 리졸버 생성ng generate module <name> --route <route>— 라우트로 모듈 생성