라우팅

우들의 영웅 관광 앱에 새로운 자격요건 이다.

• 대시보드 뷰를 추가한다.
• Heroes와 Dashboard사이에 길을 찾을수 있게 추가한다.
• 사용자들이 뷰에 어느것하나의 영웅 이름을 크릭 할때 , 선택된 영웅의 상세 뷰로 길을 찾는다.
• 사용자들이 이메일 안에 링크를 클릭 할때, 특별한 영웅의 상세 뷰를 연다.

마쳤을때, 다음처럼 앱이 네비게이트가 가능해질겁니다. 

AppRoutingModule 추가

Angular 모범적인 방법은 분리된 것을 라우터로 환경을 설정 한것을 적재하는 것이고, 최고 레벨 모듈은  root AppModule으로부터 라우링하는것과 임포관례상 모듈 클래스 이름은 AppRoutingModule 이고 app-routing.module.ts는 src/app 폴더 자리에 있다.

CLI를 사용해서 자동생성한다.

ng generate module app-routing --flat --module=app

--flat 자신의 폴더 대신에  src/app 안에  파일을 놓습니다.

--module=app CLI이 register에게 AppModule의 imports 배열에 알려준다.

PS D:\workspace\dev\angular02\angular-tour-of-heroes> ng generate module app-routing -flat --module=app

  create src/app/app-routing.module.ts (194 bytes)

  update src/app/app.module.ts (881 bytes)

자동생성된 파일은 다음과 같다.

src/app/app-routing.module.ts (generated)

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';

@NgModule({

  imports: [

    CommonModule

  ],

  declarations: []

})

export class AppRoutingModule { }

대게 라우팅 모듈에서 콤포넌트 선언을 못한고 @NgModule.declarations 배열을 삭제 할수 있고 CommonModule 참조도 역시 삭제 할수 있다. .

@angular/router 라이브러리에서 부터 2개 심볼을 import함으로써 RouterModule안에  Routes로 라우터 환경을 설정한다.

RouterModule에 @NgModule.exports 배열을 추가한다. RouterModule을 Exporting 하는 것은  그들이 필요할 AppModule 컴포넌트 에서 지시 가능한 라우터를 만든다. 

AppRoutingModule 다음 과 같다.

src/app/app-routing.module.ts (v1)

import { NgModule }             from '@angular/core';

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

@NgModule({

  exports: [ RouterModule ]

})

export class AppRoutingModule {}

라우트 추가

라우트는 라우터가 어떤 뷰를 표시하는것을 사용자가 링크를 클릭했을때나 브라우저에 주소창에 URL을 붙혀 넣었을때 알려준다.

보통 앵귤라 라우터는 두개의 속성을 갖는다.

1. path : 브라우저의 주소바에 매치되는 문자열이다.
2. component : 라우터가 이 라우터를 찾아갈때 생성 해야하는 콤포넌트다.

URL이  localhost:4200/heroes 과 약간 비슷할때  HeroesComponent를 찾을 예정이다.

라우터에서 참조할수 있는 HeroesComponent를 임포트 한다. 그리고나서 라우터들의 배열을 그 콤포넌트의 한게의 라우터와 함께  정의한다.

import { HeroesComponent }      from './heroes/heroes.component';

const routes: Routes = [

  { path: 'heroes', component: HeroesComponent }

];

셋팅이 완료되었을때, router는 URL 경로 'heroes' 와  표시되는 HeroesComponent를 매치 한다.

RouterModule.forRoot()

첫번째로 라우터를 초기화를 하고 브라우저의 경로 변경 리스닝을 시작 해야만 한다.

RouterModule을 @NgModule.imports 배열에 추가한다. 그리고 임포트한 배열안에서 RouterModule.forRoot()을 부르는 하나의 단계에서 configure을  라우터와 함깨 설정한다.  

imports: [ RouterModule.forRoot(routes) ],

메소드는 forRoot() 라고 불린다. 왜냐면 애플리케이션의 root 레벨에서 그라우터를 설정하는 것이기 때문이다.  forRoot() 메소드는 서비스 프로바이더를  공급하고, 디렉티브는 라우팅을 필요로하고, 현재 부라우저 URL에 기반을둔 항해 초기화를 수행한다.

RouterOutlet 추가

Open the AppComponent template replace the <app-heroes> element with a <router-outlet> element.

AppComponent 템픅릿을 열어  <app-heroes> 요소를 <router-outlet> 요소로 변경한다.

src/app/app.component.html (router-outlet)

<h1>{{title}}</h1>

<router-outlet></router-outlet>

<app-messages></app-messages>

<app-heroes>를 지운다 왜냐하면 HeroesComponent는 사용자가 이것을 찾아가기위해 단지 표시하는것입니다.

<router-outlet>는 라우저가 라우터된 뷰가 어디에 표시되는지 알려준다.

RouterOutlet은 AppComponent가 가능하게된 라우터 디렉티브중의 하나다. AppModule은   RouterModule을 익스포트되는한 AppRoutingModule을 임포트 하기 때문이다.

아래처럼 해보자.

여전히 이 CLI 명령어와 같이  동작  해야한다.

ng serve

브라우저는 앱 제목을 다시 표시하지만 영웅 목록은 아니다.

브라우저의 주소창을 보면 URL마지막에 /가 있다.  HeroesComponent에 라우터 경로는 /heroes 이다.

브라우저 주소창 URL에  /heroes 를 추가한다. 익숙한 영웅들의 주/상세 뷰를  볼수 있다.

링크 네비게이션 추가 (routerLink)

사용자들은  주소창에 URL 라우터를 붙혀넣기를 해야만하는것을 할 필요가없다.  길을 찾기위해서 가능하면  링크를 클릭 해야한다.

<nav> 요소를 추가하고, 그 안에서, anchor 요소 , HeroesComponent에 항해를 유발하는.  수정된 AppComponent 템플릿은 다음과 같다.

src/app/app.component.html (heroes RouterLink)

<h1>{{title}}</h1>

<nav>

  <a routerLink="/heroes">Heroes</a>

</nav>

<router-outlet></router-outlet>

<app-messages></app-messages>

routerLink 속성은 "/heroes"를 설정하며, 그 문자열은 라우터가  라우트에서 HeroesComponent로  매치한다. routerLink는 라우터 네비게이션에서 사용자브라우저가에서  앱 제목과 영웅 목록 링크가  새롭게 다시 보여진다. 그러나 영웅 목록은 아니다.

링크를 클릭한다. 주소창은 /heroes로 갱신 되고 영웅 목록이 보이기 시작한다.

이것을 만들고 링크로 이동하는 기능은 app.component.css에  최종 코드리뷰에 목록 처럼 개인 CSS를 추가하는것 처럼  좋아보인다.

대시보드 뷰 추가

멀티 뷰일때 더 감각적인 라우팅을 만든다. 지금까지 오직 하나의 영웅 뷰 만이었다.

CLI을 이용한 DashboardComponent 추가

ng generate component dashboard

CLI은 DashboardComponent의 파일을 자동생성하고 AppModule에 선언 합니다.

3개의 파일들의 기본 파일의 내용을 다음처럼 교체합니다.

src/app/dashboard/dashboard.component.html

<h3>Top Heroes</h3>

<div class="grid grid-pad">

  <a *ngFor="let hero of heroes" class="col-1-4">

    <div class="module hero">

      <h4>{{hero.name}}</h4>

    </div>

  </a>

</div>

src/app/dashboard/dashboard.component.ts

import { Component, OnInit } from '@angular/core';

import { Hero } from '../hero';

import { HeroService } from '../hero.service';

@Component({

  selector: 'app-dashboard',

  templateUrl: './dashboard.component.html',

  styleUrls: [ './dashboard.component.css' ]

})

export class DashboardComponent implements OnInit {

  heroes: Hero[] = [];

  constructor(private heroService: HeroService) { }

  ngOnInit() {

    this.getHeroes();

  }

  getHeroes(): void {

    this.heroService.getHeroes()

      .subscribe(heroes => this.heroes = heroes.slice(1, 5));

  }

}

src/app/dashboard/dashboard.component.css

템플릿에 영웅 이름 링크들의 그리드를 통해 주다.

• *ngFor 반복자는  컴포넌트의 영웅 배열에 많은 링크를   생성합니다.
• dashboard.component.css에서 부터 링크들은 스타일이 검은색으로 적용된다.
• 링크들은 아직 어느 곳으로도 가지 않고 곧 갈것이다.

 클래스는 HeroesComponent 클래스와 비슷하다.

• heroes 배열 속성을 정의한다.
• 생성자는 앵귤라가 HeroService가 private heroService 속성으로 주입하는것을 기대한다.
• ngOnInit()의 라이프사이클 hook은 getHeroes을 호출한다.

표시된 영웅들의 번호를 4개로 getHeroes는 줄이다.

getHeroes(): void {

  this.heroService.getHeroes()

    .subscribe(heroes => this.heroes = heroes.slice(1, 5));

}

대시보드 라우트 추가

대시보드로 길을 찾는것은, 라우터가 적절한 라우터를 필요로한다.

AppRoutingModule에서 DashboardComponent를 임포트한다.

src/app/app-routing.module.ts (import DashboardComponent)

import { DashboardComponent }   from './dashboard/dashboard.component';

라우터를 경로가 DashboardComponent로 매치되는것을 AppRoutingModule.routes 배열에 추가한다.

{ path: 'dashboard', component: DashboardComponent },

기본 라우트 추가

앱이 시작될때, 브라우저 주소창은 웹 사이트의 root를 가리킨다. 저것은  어디든 길을 찾지 못한하는 라우터 처럼 어떤 기존 라우트와 매치가 안된다. <router-outlet>의 아래는 비어 있다.

앱이 대시보드를로 자동적으로 찾아가는것을 만드는것은, 다음 라우터를 AppRoutingModule.Routes 배열에  추가한다.

{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },

이 경로는 빈경로와 완전히 일치하는 URL을 경로가 '/dashboard'  경로로 다시보낸다. 

브라우저가 재로고침된 후에, 라우터는 DashboardComponent를  적재한고 브라우저 주소창에 /dashboard URL을 보여준다.

쉘에 대시보드 링크 추가

사용자는 페이지 상단 근처의 탐색 영역에있는 링크를 클릭하여 DashboardComponent와 HeroesComponent간에 앞뒤로 이동할 수 있어야합니다.

AppComponent 쉘 템플릿에 대시보드 네비게이션 링크를 반드시 영웅 링크 위에 추가 한다.

src/app/app.component.html

<h1>{{title}}</h1>

<nav>

  <a routerLink="/dashboard">Dashboard</a>

  <a routerLink="/heroes">Heroes</a>

</nav>

<router-outlet></router-outlet>

<app-messages></app-messages>

브라우저가 재생된후에 링크를 클릭함으로써 두개의 뷰 사이의 길을 자유롭게 찾을수 있다.