Angular : 모듈단위 라우팅 설정하기

0. Angular의 라우팅 설정은 모듈이름-routing.module.ts파일에서 지정할 수 있다.

 

1. 설정방법

  1-1 모듈을 생성한다.

  1-2 ~routing.module.ts에 매핑할 경로와 컴포넌트를 설정한다.

  1-3 app.module.ts에 생성한 모듈을 import한다.

  1-4 app.component.html에 <router-outlet>을 작성한다.

 

2. 모듈 생성이 이전 포스트를 참조하고 매핑하는 방법은 아래와 같다. 2개의 모듈을 생성했다고 가정한다.

  2-1 elements-routing.module.ts

    2-1-1 localhost:4200/elements가 경로가 설정될 때 ElementsHomeComponent가 실행된다.

 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ElementsHomeComponent } from './elements-home/elements-home.component';


const routes: Routes = [
  { path: 'elements', component: ElementsHomeComponent }
];

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

 

  2-2 collections-routing.module.ts

    2-2-1 localhost:4200/collections이 지정될 때 ElementsHomeComponent가 실행된다.

 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CollectionsHomeComponent } from './collections-home/collections-home.component';


const routes: Routes = [
  { path: 'collections', component: CollectionsHomeComponent }
];

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

 

3 기본 모듈인 app-module.ts에 생성한 모듈을 import 목록에 추가한다.

  3-0 우선 최상위 라우팅 테이블인 app-routing.module.ts를 작성한다.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { NotFoundComponent } from './not-found/not-found.component';


const routes: Routes = [
  { path: "", component: HomeComponent },
  { path: "**", component: NotFoundComponent },
]
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

 

  3-1 이 부분이 아주 중요하다.

    3-1-1 app.module.ts에서 모듈을 import하는데 순서가 아주 중요하다.

 

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ViewsModule } from './views/views.module';
import { ModulesModule } from './modules/modules.module';
import { CollectionsModule } from './collections/collections.module';
import { ElementsModule } from './elements/elements.module';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    CollectionsModule,
    ElementsModule,
    ViewsModule,
    ModulesModule,
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

  3-2 Angular는 모든 routing 테이블을 읽어 하나의 라우팅 테이블을 만드는 데

    3-2-1 app.module.ts의 imports에 지정된 모듈순서대로 routing 테이블이 순차적으로 적용된다.

    3-2-2 예를 들어 위 코드와는 다르게 최상위 라우팅테이블 AppRoutingModule이 제일 위에 위치하고

      3-2-2-1 AppRoutingModule의 routes에 아래처럼 ** 경로가 매핑되어 있으면 다른 모듈이 로딩 될 수가 없다.

 

4. app.component.html에 router-outlet을 설정한다.

  4-1 중요한 부분은 router-outlet이다. URL이 변경되면 Angular는 해당 컴포넌트를 찾아 router-outlet위치에 추가한다.

 

<div class="ui container">
  <div class="ui secondary pointing menu">
    <a routerLink="/elements" routerLinkActive="active" class="item">Elements</a>
    <a routerLink="/collections" routerLinkActive="active" class="item">Collections</a>
  </div>
  <div class="ui segment">
    <router-outlet></router-outlet>
  </div>
</div>