Angular의 Routing 사용하기 -기본편-

1. 구조 - home, about, user 컴포넌트 생성

ng g c home
ng g c about
ng g c user

1. app-routing.module.ts 에서 Routes에 생성한 컴포넌트와 path를 추가한다.

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

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

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

1. 설정한 Rotuer 적용하기 및 결과 (app.component.html)

<h1>Code Step By Step</h1>

<a routerLink="">Home</a><br>
<a routerLink="about">About</a><br>
<a routerLink="user">User</a><br>

<router-outlet></router-outlet>