[angular] 라우팅 구성

26 Dec 2023

angular

이번에 우리는 Angular 애플리케이션의 라우팅을 구성하는 방법에 대해 알아 보겠습니다.

1. 라우팅 모듈 생성

Angular 애플리케이션에서 라우팅을 구성하기 위해서는 먼저 라우팅 모듈을 생성해야 합니다. 다음은 라우팅 모듈을 생성하는 방법입니다.

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

여기서 ‘–flat’ 플래그는 새로운 폴더를 생성하지 않고 바로 현재 폴더에 라우팅 모듈을 생성할 것을 지정하고, ‘–module=app’ 플래그는 라우팅 모듈이 애플리케이션 모듈과 연결될 것임을 지정합니다.

2. 라우터 구성

라우팅 모듈을 생성한 다음에는 라우터를 구성해야 합니다. 다음은 라우트를 설정하는 예시입니다.

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 },
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: '**', redirectTo: '/home' }
];

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

이 예시에서 ‘Routes’ 배열에는 경로와 컴포넌트를 매핑하는 설정이 포함되어 있습니다. 라우터 구성은 매우 유연하며, 추가적인 설정을 통해 각 라우트의 속성을 지정할 수 있습니다.

3. 라우터 사용

마지막으로, 우리는 라우터를 애플리케이션에 사용해야 합니다. 라우터를 사용하려면 애플리케이션의 모듈에 라우팅 모듈을 임포트해야 합니다.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

이제 우리의 Angular 애플리케이션은 라우팅을 지원하고 구성되었습니다.

이 상세한 가이드를 따라하면 라우팅을 구성하는 데 문제가 없을 것입니다. 만약 추가 질문이 있거나 도움이 필요하다면 언제든지 물어봐주세요!