[Angular] 라우터모듈

라우터는 앵귤러의 핵심 라이브러리의 하나이기에

앵귤러의 라우터에서 불러오고있다. import { RouterModule, Routes } from '@angular/router';

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

const routes: Routes = [];

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

forRoot같은 경우는 라우터모듈이 루트모듈에 등록이 된다. 정도로 이해하면된다. forChild, forRoot => 앵귤러내의 컨벤션

exports에서 다시 RouterModule을 export하고있다.

 

const routes: Routes = [
  {
path: '',
redirectTo: 'index',
pathMatch: 'full'
  },
];

http://developeritchae.com/ 이면? => 리다이렉트를 http://developeritchae.com/index로 Redirect시키는것을 의미한다. 

 

pathMatch에는 prefix라는 것도 있다. 이것은 path:'123'이라면 http://developeritchae.com/123jfskdjfk 이어도123을 포함하기에 index로 redirect를 시켜준다는 pathMatch속성이다.

 

const routes: Routes = [
  {
    path: '',
    redirectTo: 'index',
    pathMatch: 'full',
  },
  {
    path: 'index',
    component: AppComponent,
  },
];

이런 속성을 주면 실제프로젝트를 확인해보면 index로 간것을 확인 할 수 있다. 

 

 

라우터가 정확하게 적용되려면

라우터 아울렛이 쓰여야된다.

 

어느곳이 적당한 구조일까? 정답은 섹션

 

섹션의 모듈로 가서 수정을 해줘야한다.

 

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SectionComponent } from './section.component';
import { StopwatchModule } from './stopwatch/stopwatch.module';
import { RouterModule, Routes } from '@angular/router';
import { StopwatchComponent } from './stopwatch/stopwatch.component';

const routes : Routes = [
{
  path : 'stopwatch',
  component : StopwatchComponent
}
]

@NgModule({
  declarations: [SectionComponent],
  exports: [SectionComponent, RouterModule],
  imports: [CommonModule, StopwatchModule, RouterModule.forChild(routes)],
})
export class SectionModule {}

const routes를 만들고 import시 forChlid를 통해서 매칭시킨 후  export해준다.

 

---

페이지간의 이동

---

ng g c section/clock 

섹션안에 clock컴포넌트를 만들어주자

 

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SectionComponent } from './section.component';
import { StopwatchModule } from './stopwatch/stopwatch.module';
import { RouterModule, Routes } from '@angular/router';
import { StopwatchComponent } from './stopwatch/stopwatch.component';
import { ClockComponent } from './clock/clock.component';

const routes: Routes = [
  {
    path: 'stopwatch',
    component: StopwatchComponent,
  },
];

@NgModule({
  declarations: [SectionComponent, ClockComponent],
  exports: [SectionComponent, RouterModule],
  imports: [CommonModule, StopwatchModule, RouterModule.forChild(routes)],
})
export class SectionModule {}

Clock이 생겻음을 확인 할 수 있다.

 

path도 추가해준다.

 

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SectionComponent } from './section.component';
import { StopwatchModule } from './stopwatch/stopwatch.module';
import { RouterModule, Routes } from '@angular/router';
import { StopwatchComponent } from './stopwatch/stopwatch.component';
import { ClockComponent } from './clock/clock.component';

const routes: Routes = [
  {
    path: 'stopwatch',
    component: StopwatchComponent,
  },
  {
    path: 'clock',
    component: ClockComponent,
  },
];

@NgModule({
  declarations: [SectionComponent, ClockComponent],
  exports: [SectionComponent, RouterModule],
  imports: [CommonModule, StopwatchModule, RouterModule.forChild(routes)],
})
export class SectionModule {}

 

<div class="title">
  <div class="display">
    <app-time-display></app-time-display>
    <!-- <app-buttons (clickEvent)="startTime($event)"></app-buttons> -->
  </div>
  <a [routerLink]="'/clock'">시계로 이동</a>
</div>