Angular Routing

1. 라우팅을 담당 할 모듈을 생성한다.

ng generate module app-routing --flat --module=app              // -flat : src 하에 추가디렉토리 없이 바로  생성하도록 

2. 해당 모듈이 Routing 기능을 담당할 수 있도록 ,  RouterModule 과 Routes  를 import 해준다.

  2-1)  ComonModule 과 declarations 은 필요 없으므로 삭제한다.   

          ㄴroot모듈 이외는 작성     ㄴ 필요한 컴포넌트,파이프등 탑재

  2-2)  RouterModule은 브라우져 주소가 바뀌는 것을 지켜보게 한다.

  2-3)  설정된 라우트를 app전반에서  사용할 수 있도록 export해준다.

 

import { NgModule } from `@angular/core`;
import { RouterModule, Routes } from `@angular/common`;
import { HeroesComponent } from './heroes/heroes.component';

const routes: Routes=[
  { path: 'heroes', component: HeroesComponent }   // heroes 로 HeroesComponent 를 부를 수 있다.
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],  //다른 모듈들을 사용하기 위함
  exports: [ RouterModule ]                   //다른 ㅁ듈에서 사용할수 있도록
})

export class AppRoutingModule { }

3. HTML 에  <router-outlet> 을 게시함으로써 라우팅된 뷰가 해당 장소에 나타나게 해준다..

<nav>
  <a routerLink="/heroes">Heroes</a>
  <a routerLink="/dashboard">Dashboard</a>
</nav>

<router-outlet></router-outlet>

 

---

   결과

---

라우팅전

 

---

라우팅후