Written by angular-style
on 2021-01-05

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

Angular Router

Crisis Center //두개의 angular가 제공하는 routing관련 directive

Heroes

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

//routerLinkActive란 해당 Router 활성화 시, "active"(사용자가 이름 변경 가능) 클래스 속성을 Dom에 추가해주는 Directive

< router-outlet > //Router에 의해 적용된 Component들이 표출될 영역

// < router-outlet name="">

여기까지 하면, 가장 간단하게 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 //컴포넌트 생성 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 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

from http://sddev.tistory.com/30 by ccl(A) rewrite - 2021-01-05 13:59:36

Top