Angular Routing

# 개요

- 앵귤러 같은 경우, Routing을 너무 편하게 해둔 것 같다. 적용 순서는 아래와 같다.

 

# app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { CrisisListComponent } from './crisis-list/crisis-list.component';
import { HeroListComponent } from './hero-list/hero-list.component';

import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent }, //localhost:4200/crisis-center에 접속할 경우, CrisisListComponent를 보여준다.
  { path: 'heroes',        component: HeroListComponent }, //localhost:4200/heroes에 접속할 경우, HeroListComponent를 보여준다.
  { path: '',   redirectTo: '/heroes', pathMatch: 'full' },    //localhost:4200에 접속할 경우, 자동으로 localhost:4200/heroes로 이동한다.

                                                                       //pathMatch:full(패스 완전히 입력해야), pathMatch:prefix(패스 앞부부만 입력해도?)
  { path: '**', component: PageNotFoundComponent } //**란? 확인되지 않은 모든 경로를 의미, PageNotFoundComponent를 보여준다.
];

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
  ],
  declarations: [
    AppComponent,
    HeroListComponent,
    CrisisListComponent,

    PageNotFoundComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { } //현재 상태는 Routing 기능을 App.Module.ts 쪽에 구현하고 있으므로, Routing기능 모듈로 따로 분할 필요

 

# app.component.html

<h1>Angular Router</h1>
<nav>
  <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a> //두개의 angular가 제공하는 routing관련 directive
  <a routerLink="/heroes" routerLinkActive="active">Heroes</a>

   //routerLink란 해당 Dom의 클릭 이벤트시, 해당 url로 redirect 해주는 기능을 제공하는 Directive

   //routerLinkActive란 해당 Router 활성화 시, "active"(사용자가 이름 변경 가능) 클래스 속성을 Dom에 추가해주는 Directive
</nav>
<router-outlet></router-outlet> //Router에 의해 적용된 Component들이 표출될 영역

// <router-outlet name=""></router-outlet>

 

여기까지 하면, 가장 간단하게 Routing 기능을 구현할 수 있다. 그러나 App.Module.ts 쪽에 라우팅 구현부분을 따로 Routing을 담당하는 모듈로 변경해보자

 

# app-routing.module.ts : 신규생성, ts파일만, css, html 제외

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

import { CrisisListComponent } from './crisis-list/crisis-list.component';
import { HeroListComponent } from './hero-list/hero-list.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

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

@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule {}

 

# app.module.ts : routing 모듈 추가

 

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

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { CrisisListComponent } from './crisis-list/crisis-list.component';
import { HeroListComponent } from './hero-list/hero-list.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule
  ],
  declarations: [
    AppComponent, 
    HeroListComponent, //여전히 컴포넌트 전역? 선언 필요
    CrisisListComponent, //여전히 컴포넌트 전역? 선언 필요
    PageNotFoundComponent //여전히 컴포넌트 전역? 선언 필요
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

 

# Heroes 기능(Feature 분리)

src/app/heroes                          // 1. src/app 폴더 내 heroes 폴더 생성

 

hero-detail                               // hero-detail 컴포넌트 생성

hero-detail.component.css

hero-detail.component.html

hero-detail.component.ts

hero-list                                  // hero-list 컴포넌트 생성

hero-list.component.css

hero-list.component.html

hero-list.component.ts

hero.service.ts

hero.ts

heroes-routing.module.ts

heroes.module.ts                      // 2. 신규 heroes 메인 모듈 생성

mock-heroes.ts 

 

# heroes.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { HeroListComponent } from './hero-list/hero-list.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
import { HeroesRoutingModule } from './heroes-routing.module';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    HeroesRoutingModule
  ],
  declarations: [
    HeroListComponent,
    HeroDetailComponent
  ]
})
export class HeroesModule {}

 

# hereos-routing.module.ts

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

import { HeroListComponent } from './hero-list/hero-list.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';

const heroesRoutes: Routes = [
  { path: 'heroes',  component: HeroListComponent },
  { path: 'hero/:id', component: HeroDetailComponent } //localhost:4200/hero/15로 입력할 경우, id가15인 HeroDetailComponent를 보여줌
];

@NgModule({
  imports: [
    RouterModule.forChild(heroesRoutes) //AppRoutingModule만 forRoot를 사용하고, 나머지는 전부 forChild를 사용한다.
  ],
  exports: [
    RouterModule
  ]
})
export class HeroesRoutingModule { }

 

# app.module.ts 내에서, 기존 heroes 관련 component declaration 제거

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HeroesModule } from './heroes/heroes.module'; //해당 모듈내에서 이미 heroes 관련 component를 제공(declaration)함

import { CrisisListComponent } from './crisis-list/crisis-list.component';

import { HeroListComponent } from './hero-list/hero-list.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HeroesModule,
    AppRoutingModule //가장 마지막에 와야한다. Router가 Path를 인식하는  방식 때문에 그렇다.
  ],
  declarations: [
    AppComponent,
    CrisisListComponent,

    HeroListComponent 
    PageNotFoundComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

 

#hero-list.component.html

<a [routerLink]="['/hero', hero.id]">