5-2. Routing 기초 - 2

지난번까지해서 Routing 설정하는것을 해봤습니다. [routerLink]와 @RouteConfig를 이용해서 간단하게 Routing 설정을 할 수 있었습니다. 그럼 지난 포스팅에 이어 이번에는 Routing 할 Component를 하나 추가하고, 그 외 Routing 기능이 뭐가 있는지 알아보겠습니다.

npm start.

먼저 지난번과 동일하게 RouteConfig 에 먼저 추가해주겠습니다.

import { Component }       from '@angular/core';
import { HeroService }     from './hero.service';
import { HeroesComponent } from './heroes.component';
import {ROUTER_PROVIDERS, ROUTER_DIRECTIVES, RouteConfig} from "@angular/router-deprecated";
import {DashboardComponent} from "./dashboard.component";

@Component({
    selector: 'my-app',
    template: `
      <h1>{{title}}</h1>
      <nav>
        <a [routerLink]="['Dashboard']">Heroes</a>
        <a [routerLink]="['Heroes']">Heroes</a>
      </nav>
      <router-outlet></router-outlet>
    `,
    styleUrls: ['app/app.component.css'],
    directives: [
        ROUTER_DIRECTIVES, HeroesComponent
    ],
    providers: [
        ROUTER_PROVIDERS, HeroService
    ]
})

@RouteConfig([
    {path: '/dashboard', name: 'Dashboard', component: DashboardComponent, useAsDefault: true},
    {path: '/heroes', name: 'Heroes', component: HeroesComponent}
])

export class AppComponent {
    title = 'Tour of Heroes';
}

     . template 에 routerLink를 Dashboard라는 이름으로 추가를 했습니다.

     . RouteConfig에도 Dashboard라는 이름의 Router를 추가합니다. useAsDefault는 말 그대로 default로 사용되는 경로입니다.

그럼 Routing에서 사용될 Dashboard 라는 이름의 Component 를 추가합니다. 따라서 dashboard.component.ts와 dashboard.component.html, dashboard.component.css 를 만듭니다.

import {Component, OnInit} from "@angular/core";
import {Hero} from "./hero";
import {Router} from "@angular/router-deprecated";
import {HeroService} from "./hero.service";

@Component({
    selector: 'my-dashboard',
    templateUrl: 'app/dashboard.component.html',
    styleUrls: ['app/dashboard.component.css']
})

export class DashboardComponent implements OnInit {
    heroes: Hero[];

    constructor(
        private router: Router,
        private heroService: HeroService) { }

    ngOnInit() {
        this.heroService.getHeroes()
            .then(heroes => this.heroes = heroes.slice(1, 5));
    }

    gotoDetail(hero: Hero) {
        this.router.navigate(['HeroDetail', { id: hero.id }]);
    }
}

     . Router와 HeroService를 주입해줍니다.

     . ngOnInit에서는 heroService의 Hero를 받아와서 배열의 1~5까지 잘라서 클래스 변수에 넣어줍니다.

     . goToDetail 함수는 Router 서비스의 navigate 메소드를 사용합니다. HeroDetail이라는 이름을 가진 Routing으로 이동하는데, 파라미터로 id를 넣어준다입니다.(잠시후 알아봅시다.)

<h3>Top Heroes</h3>
<div class="grid grid-pad">
    <div *ngFor="let hero of heroes" (click)="gotoDetail(hero)" class="col-1-4">
        <div class="module hero">
            <h4>{{hero.name}}</h4>
        </div>
    </div>
</div

     . 앞서 배운것과 동일합니다. click 이벤트로는 gotoDetail을 실행합니다.

[class*='col-'] {
    float: left;
}
*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
h3 {
    text-align: center; margin-bottom: 0;
}
[class*='col-'] {
    padding-right: 20px;
    padding-bottom: 20px;
}
[class*='col-']:last-of-type {
    padding-right: 0;
}
.grid {
    margin: 0;
}
.col-1-4 {
    width: 25%;
}
.module {
    padding: 20px;
    text-align: center;
    color: #eee;
    max-height: 120px;
    min-width: 120px;
    background-color: #607D8B;
    border-radius: 2px;
}
h4 {
    position: relative;
}
.module:hover {
    background-color: #EEE;
    cursor: pointer;
    color: #607d8b;
}
.grid-pad {
    padding: 10px 0;
}
.grid-pad > [class*='col-']:last-of-type {
    padding-right: 20px;
}
@media (max-width: 600px) {
    .module {
        font-size: 10px;
        max-height: 75px; }
}
@media (max-width: 1024px) {
    .grid {
        margin: 0;
    }
    .module {
        min-width: 60px;
    }
}

여기까지 하면 Routing이 하나 더 추가되어 dashboard를 클릭하면 dashboard component를, heroes를 클릭하면 heroes component를 볼수 있습니다. 하지만 앞서 봤던 gotoDetail에서 HeroDetail이라는 이름의 Routing이 필요합니다. 파라미터까지 추가할 수 있도록 해서요. RouteConfig에 아래와 같이 추가를 해줍니다.

@RouteConfig([
    {path: '/dashboard', name: 'Dashboard', component: DashboardComponent, useAsDefault: true},
    {path: '/heroes', name: 'Heroes', component: HeroesComponent},
    {path: '/detail/:id', name: 'HeroDetail', component: HeroDetailComponent}
])

 

     . Routing에 파라미터를 받으려면 path에 콜론(:) + (변수명)을 적어줍니다. 나머지는 동일합니다.

HeroDetailComponent에서 해당 파라미터를 사용하기 위해서 일부 수정을 해줍니다.

import {Component, Input, OnInit} from '@angular/core';
import {Hero} from "./hero";
import {RouteParams} from "@angular/router-deprecated";
import {HeroService} from "./hero.service";

@Component({
    selector: 'my-hero-detail',
    templateUrl: 'app/hero-detail.component.html'
})

export class HeroDetailComponent implements OnInit {
    @Input()
    hero: Hero;

    constructor(
        private heroService: HeroService,
        private routeParams: RouteParams) {}

    ngOnInit() {
        let id = +this.routeParams.get('id');
        this.heroService.getHero(id)
            .then(hero => this.hero = hero);
    }


    goBack() {
        window.history.back();
    }
}

     . 우선 파라미터 사용을 위해 RouteParams Service를 주입시켜줍니다.

     . RouteParams Service의 get 함수를 사용하면 값을 받아올 수 있습니다. id는 path에서 적었던 파라미터 변수입니다.

     . +기호는 get 함수가 기본적으로 string을 받아오기 때문에 number로 casting하는 방법 중 하나입니다.

     . goBack 함수는 기본적인 브라우저의 뒤로가기를 구현해놓은 겁니다.

<div *ngIf="hero">
    <h2>{{hero.name}} details!</h2>
    <div><label>id: </label>{{hero.id}}</div>
    <div>
        <label>name: </label>
        <input [(ngModel)]="hero.name" placeholder="name"/>
    </div>
    <button (click)="goBack()">Back</button>
</div>

 

     . button 하나를 추가해서 goBack() 함수를 호출하도록 했습니다.

위에서 getHero 함수를 사용했는데 HeroService에는 해당 함수가 없습니다. 추가를 해줍시다.

app/hero.service.ts

     . heroes 리스트를 받아와서 배열에 filter 함수를 적용합니다. id가 동일한 것중 하나만 가지고 옵니다.

     . filter는 Javascript 배열의 기본 함수입니다. 콜백 메소드를 파라미터로 받아서 true를 리턴하는 것만 가져오는 함수입니다.

여기까지 Routing에 대한 부분이 잘 마무리 되었네요. 원문에서는 pipe까지 일부 다루고 있지만 정말 조금 있어서 이건 나중에 포스팅을 따로 해보겠습니다. 여기까지 대메뉴 2개에 파라미터를 받는 HeroDetailComponent의 Routing까지 확인을 해봤습니다. 정말 쉽게 Routing을 할수 있지만, Angular 개발자분들에겐 더 고칠게 있나봅니다. 저희야 더 간단하게 어플리케이션을 만들 수 있다면 더 좋은 일이죠. 다음에 더 멋진 Routing을 기대하면서 오늘 포스팅은 마치겠습니다. 즐코딩하세요:)