-
2-6 경로배정(Routing) 추가앵귤러/01 퀵스타트 & 튜토리얼 2017. 8. 6. 10:14
경로배정(Routing) 추가
이제 경로배정을 추가하는 작업을 진행해 보자.
src/index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngularTourOfHeroes</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<my-app></my-app>
</body>
</html>
<base>태그
<head>태그 맨 윗부분에 <base> 태그를 추가하여야 한다.
<head>
<base href="/">
모듈에 경로 설정하기
src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HeroDetailComponent } from './hero-detail.component';
import { HeroesComponent } from './heroes.component';
import { HeroService } from './hero.service';
@NgModule({
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot([{path:'heroes', component:HeroesComponent}])
],
declarations: [
AppComponent,
HeroDetailComponent,
HeroesComponent
],
providers: [
HeroService
],
bootstrap: [ AppComponent ]
})
export class AppModule {
}
경로지정을 위해 RouterModule을 사용한다.
forRoot메소드의 파라미터는 Routes클래스로 경로를 정의하는 배열이다.
경로 정의 배열 속성
path : URL로 사용할 경로명
component : 라우터가 경로를 탐색할 때 사용할 컴포넌트
이제 app.component.ts파일에서 경로배정(Routing)작업을 진행해 보자.
src/app/app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<a routerLink="/heroes">영웅들</a>
<router-outlet></router-outlet>
`
})
export class AppComponent {
title = '영웅 여행';
}
<router-outlet>
만일 브라우저의 주소란에 /heroes라고 입력하면 라우터는 HeroesComponent를 화면 어딘가에 표시해 주어야 한다. <router-outlet>태그에 라우터가 표시할 컴포넌트의 위치가 된다.
<router-outlet></router-outlet>
routerLink
<a>태그의 routerLink속성값에 경로배정의 path값을 설정한다.
Heroes를 클릭하면 /heroes경로에 해당하는 HeroesComponent가 <router-outlet>태그 위치에서 표시된다.
영웅여행의 영웅들을 클릭하면 브라우저의 주소가 http://localhost:4200/heroes로 바뀌면서 나의 영웅들 목록이 화면하단에 표시되는 것을 확인할 수 있다.
'앵귤러 > 01 퀵스타트 & 튜토리얼' 카테고리의 다른 글
2-8 대시보드에 주요 영웅목록 만들기 (0) 2017.08.06 2-7 경로배정에 대시보드 추가 (0) 2017.08.06 2-5 경로배정(Routing)을 위한 컴포넌트 수정 (0) 2017.08.06 2-4 서비스 분리 (0) 2017.08.06 2-3 영웅여행 마스터/디테일 분리 (0) 2017.08.06
