Angular - 튜토리얼12_라우팅

1)

ng new FrontEnd3

ng g component login

ng g component board

 

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { BoardComponent } from './board/board.component';
import { RouterModule,Routes } from '@angular/router';

const router : Routes = [ // 라우팅
  {path : 'login' , component : LoginComponent},
  {path : 'board' , component : BoardComponent},
  {path : '', redirectTo : '/login', pathMatch : 'full'}
]

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    BoardComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(router,{enableTracing:false, useHash: true}), // useHash는 나중에 요긴하게 쓰입니다.
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

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

@Component({
  selector: 'app-root',
  template: '<router-outlet></router-outlet>',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'FrontEnd3';
}

2)

login

board