티스토리 뷰

Javascript/Angular

5-1. Routing 기초 - 1

CU SONAR 2016. 6. 19. 22:25

이번 포스팅에서는 Angular 2의 Routing에 대해서 알아보겠습니다. 이번에 rc 버전으로 들어오면서 기존 routing이 deprecated 될거라고 해서 포스팅하기 애매하긴 한데요. 변경되면 그 때 또 다시 포스팅을 하도록 하죠.


그럼 npm start와 함께 시작해보겠습니다.

기존에 만들어놨던 기능은 routing의 한 기능으로 뺍니다. 그렇게 하기 위해 app.component.ts를 heroes.component.ts로 rename 합니다. Coponent 명칭이 바뀌었으므로 파일 내부에 AppComponent도 HeroesComponent로 변경하고, selector도 기존의 my-app에서 my-heroes로 변경합니다. 그리고 html과 css 파일명과 경로도 수정해줍시다.
import {Component, OnInit} from '@angular/core';
import {Hero} from "./hero";
import {HeroDetailComponent} from "./hero-detail.component";
import {HeroService} from "./hero.service";

@Component({
    selector: 'my-heroes',
    templateUrl: 'app/heroes.component.html',
    styleUrls: ['app/heroes.component.css'],
    directives: [HeroDetailComponent],
    providers: [HeroService]
})

export class HeroesComponent implements OnInit {
    constructor(private heroService: HeroService) { }

    ngOnInit() {
        this.getHeroes();
    }

    title = 'Tour of Heroes';
    heroes: Hero[];
    selectedHero: Hero;

    onSelect(hero: Hero) { this.selectedHero = hero; }

    getHeroes() {
        this.heroService.getHeroes().then(
            heroes => this.heroes = heroes
        );
    }
}

app/app.component.html -> app/heroes.component.html
app/app.component.css -> app/heroes.component.css

그리고 없어졌던 app.component.ts는 아래와 같이 만들어줍니다. 그와 동시에 app.component.html도 만들어줍니다.
import { Component }       from '@angular/core';
import { HeroService }     from './hero.service';
import { HeroesComponent } from './heroes.component';

@Component({
    selector: 'my-app',
    template:  `
        
{{title}}

        
    `,
    directives: [HeroesComponent],
    providers: [
        HeroService
    ]
})

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

 

위와 같이 app.component를 추가하면서 두가지를 수정해주셔야 합니다.(html 코드가 많지 않아 template으로 처리했습니다.) 우선 template에 title이 중복되므로 삭제해줍니다. 그리고 heroes.component.ts에 providers를 삭제해줍니다. Service의 경우 최상위에 한번만 providers를 사용하시면 됩니다.

이제 본격적으로 Routing 설정을 하기에 앞서 base 태그를 이용해서 Base URL을 지정해줍니다. index.html 파일의 head 태그에 추가해줍니다.
<head>
    <base href="/">

그리고 Router 기능을 사용하기 위한 Service를 제공하는 ROUTER_PROVIDERS, 그리고 Directive를 제공하는 ROUTER_DIRECTIVES, 마지막으로 Router 설정을 담당하는 RouteConfig를 import 해줍니다. 그리고 import 된 라이브러리들을 사용합니다. 앞서 배운대로 directive는 directives에, service는 providers에 넣어줍니다. 그리고 RouteConfig를 이용해 Routing 설정을 해봅시다.
import { Component }       from '@angular/core';
import { HeroService }     from './hero.service';
import { HeroesComponent } from './heroes.component';
import {ROUTER_PROVIDERS, ROUTER_DIRECTIVES} from "@angular/router-deprecated";

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

@RouteConfig([
  {path: '/heroes', name: 'Heroes', component: HeroesComponent}
])

export class AppComponent {
    title = 'Tour of Heroes';
}
 
     . RouteConfig는 배열을 parameter로 받습니다. 하나하나는 Routing 되는 하나하나의 path입니다.
     . 기본구성은 URL을 지정하는 path, 내부적으로 routing에서 사용하는 name(항상 대문자로 시작되어야 함), 그리고 해당 path로 이동할 때 수행할 component로 구성됩니다.
     . template의 a 태그에 [routerLink] directive를 추가했습니다. 클릭하면 Heroes로 Routing 된다는 뜻입니다.
     . router-outlet 태그는 routing된 화면을 뿌려주는 곳입니다.

여기까지 간단하게 Routing에 대해 알아봤습니다. Heroes라는 a 태그를 누르면 router-outlet 태그에 지난번에 작성한 HeroesComponent가 나타나는 것을 볼 수 있습니다. Routing 부분은 길어서 2회에 나눠서 진행을 하겠습니다. (1일 1포스팅이 어렵네요^^;)
저작자표시

'Javascript > Angular' 카테고리의 다른 글

Spring 에 Angular 빌드 소스 import  (0) 2018.07.16
5-2. Routing 기초 - 2  (0) 2016.06.20
4. Service 만들기  (0) 2016.06.17
3. 파일 나누기, Component 나누기  (1) 2016.06.15
2. 기본적인 Directive 맛보기  (1) 2016.06.13
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
글 보관함