HTML52017. 3. 2. 21:49


다음으로는 세가지에 대해 알아보겠다.

  • App과 route들을 module을 사용해서 feature 영역에 배치하기
  • 콤포넌트에서 다른 콤포넌트로 네이게이트하기
  • 필수 또는 옵셔널한 정보를 라우트파라메터로 전달하기

대부분의 앱을 개발하다보면 업무별로 구분하기 위해서 폴더들을 생성하여 그 아래에 소스들을 배치하게 된다.

src/app/heroes |- hero-detail.component.ts |- hero-list.component.ts |- hero.service.ts |- heroes.module.ts


heros.module.ts는 아래와 같이 정의되어 있다.


import { NgModule }       from '@angular/core';
import { CommonModule }   from '@angular/common';
import { FormsModule }    from '@angular/forms';
import { HeroListComponent }    from './hero-list.component';
import { HeroDetailComponent }  from './hero-detail.component';
import { HeroService } from './hero.service';
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
  ],
  declarations: [
    HeroListComponent,
    HeroDetailComponent
  ],
  providers: [ HeroService ]
})
export class HeroesModule {}


heros feature에는 두개의 콤포넌트가 있다. herolist와 herodetail. 리스트뷰는 조회된 결과를 표시하고 detail은 선택된 hero의 상세정보를 표시한다. list에서 detail로 넘어갈때는  hero id를 넘겨야 한다.


다음은 라우트 설정이다.


src/app/heroes/heroes-routing.module.ts

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HeroListComponent }    from './hero-list.component';
import { HeroDetailComponent }  from './hero-detail.component';
const heroesRoutes: Routes = [
  { path: 'heroes',  component: HeroListComponent },
  { path: 'hero/:id', component: HeroDetailComponent }
];
@NgModule({
  imports: [
    RouterModule.forChild(heroesRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class HeroRoutingModule { }


두개의 콤포넌트에 대한 라우팅설정을 완료하였다. 하나는 path에 파라메터를 전달할 수 있도록 정의하였다. 그리고 HeroRoutingModule을 export하였다.

그리고 RouterModule에 등록하고 있는데  AppRoutingModule과 다른점은 forRoot가 아니라 forChild를 사용한것이다. feature 모듈에서는 forChild를 사용해야 한다. forRoot는 앱레벨이다.

이제 HerosModule에 추가해야 한다.


import { NgModule }       from '@angular/core';
import { CommonModule }   from '@angular/common';
import { FormsModule }    from '@angular/forms';
import { HeroListComponent }    from './hero-list.component';
import { HeroDetailComponent }  from './hero-detail.component';
import { HeroService } from './hero.service';
import { HeroRoutingModule } from './heroes-routing.module';
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    HeroRoutingModule
  ],
  declarations: [
    HeroListComponent,
    HeroDetailComponent
  ],
  providers: [ HeroService ]
})
export class HeroesModule {}

앱 메인라우터 설정과 중복이 있더라도 feature 라우터 우선으로 동작하는데는 문제가 없으나 중복은 좋지 않기 때문에 메인 라우터에 중복이 있다면 제거한다.


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

import { CrisisListComponent }   from './crisis-list.component';
// import { HeroListComponent }  from './hero-list.component';  // <-- delete this line
import { PageNotFoundComponent } from './not-found.component';

const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  // { path: 'heroes',     component: HeroListComponent }, // <-- delete this line
  { path: '',   redirectTo: '/heroes', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

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


HorosModule로 별도로 분리된 모듈의 경우 AppModule에 추가해주어야 한다.

app.module.ts에 imports에 추가해준다.

app.module.ts에 import되는 순서에 따라 라우팅시 패턴매칭의 순서가 정해진다. 원하는대로 동작시키길 원한다면 순서에 유의해야 한다.



Posted by 삼스

댓글을 달아 주세요