My Profile Photo

DongChanS's blog

수학과 학생의 개발일지

Angular (8) Tutorial - Routing(1) - static routing

1) Routing

  • Dashboard <-> Heroes

    두개의 화면을 왔다갔다할 수 있는 링크

  • detail view를 보여주는 링크

=> 링크 대신에 Router라는 말을 씁니다. (새로운 페이지로 이동하는게 아니라, 이동할 수 있는 통로만 만드는 것이기 때문에.)

1-1 . Add the AppRoutingModule

  • 일반적으로 router를 top-level module(AppModule)에 놓는것이 좋습니다.
ng generate module app-routing --flat --module=app
  1. ng generate module app-routing

    app-routing이라는 모듈을 생성

  2. --flat : 모듈 파일을 현재 폴더(앱 바깥쪽) 대신에 src/app에 놓을것!

  3. --module=app : 이 라우팅 모듈을 app의 모듈 타입스크립트 파일의 imports 배열에 추가해라!

(물론 이렇게 안하고 app module에서 해도 되긴하는데.. 그래도 기능따라 분리하는게 컨벤션상 좋잖아요??)

  • 처음 모습
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: []
})
export class AppRoutingModule { }

  1. 일반적으로 라우트 모듈 안에서 component를 선언하지는 않으므로 declarations는 필요없음.

    그리고 일반 모듈이 아니므로 CommonModule 부분도 지워줍시다.

    (이거 안하면 에러납니다!!)

  2. 라우트 모듈 안에서 여러 라우트를 Routes 클래스를 통해서 설정할 수 있는데,

    Routes는 RouterModule 모듈 안에 있으므로 둘다 임포트해야합니다.

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

  3. RouterModule을 exports 배열에 넣기

    • exports와 imports의 차이?

      • exports : 다른 모듈이나 컴포넌트에서 사용할 수 있도록 공개할 것
      • imports : exports로 공개된 클래스를 사용할 것

      라우트는 유저들이 사용하도록 공개하는거니까 exports 배열에 넣는것이 맞습니다.

1-2. Add routes

각 라우트는 두개의 멤버변수를 갖습니다.

  1. path : string, URL을 뜻함.
  2. component : 이 URL에 대한 페이지를 표현해 줄 컴포넌트

과제) /heroes 로 이동하면, Heroes 컴포넌트를 보여주고 싶다!

  1. 컴포넌트를 라우트 모듈 파일에 임포트한다.
  2. 그 컴포넌트와 링크주소를 라우트의 component, path 멤버변수에 넣는다.
// app-routing.module.ts
import { HeroesComponent }      from './heroes/heroes.component';

const routes: Routes = [
  { path: 'heroes', component: HeroesComponent }
];

이제 /heroes에 이동하면 Heroes 컴포넌트의 내용만 로드되기를 기대하겠지만..

1

Message component와 타이틀도 등장하는 모습을 볼 수 있습니다.

네 그렇습니다. 아직 우리는 라우트를 사용하고 있지 않습니다!!

단지 메인페이지의 데이터만 그대로 가지고 있고, url만 계속해서 바꿔주고 있는것 뿐입니다.

뜬금없이 /ok로 이동하면 어떻게되는지 실험해봅시다.

2

그렇습니다. 정말 메인페이지와 똑같은 모습입니다.

heroes 링크라고 특별한것도 아니고 그냥 아무런 의미도 없는 것이었죠..

라우트를 진짜로 사용하려면 몇가지 절차가 있습니다.

2) how to use routes

먼저 라우트를 사용가능한 상태로 만들어줘야 합니다.

2-1. RouterModule.forRoot()

일단 문법은 매우 간단합니다.

// app-routing.module.ts
@NgModule({
  exports : [
    RouterModule,
  ],
  imports : [
    RouterModule.forRoot(routes)
  ]
})

A router has no routes until you configure it. The following example creates five route definitions, configures the router via the RouterModule.forRoot() method, and adds the result to the AppModule’s imports array.

그냥 라우터 설정을 forRoot()라는 메서드를 통해서 한다고 생각하시면 됩니다.

사실 forRoot()라는 메서드는 라우터 설정을 어플리케이션의 루트 단위에서 하기 때문에 붙여졌습니다.

routes라는 값에 대략적인 path와 컴포넌트의 매칭정보만 들어 있다면, forRoot() 메서드는 그 path에 대해서 컴포넌트를 제공할 수 있는 service들을 만들어주는 역할을 합니다.

The method is called forRoot() because you configure the router at the application’s root level. The forRoot() method supplies the service providers and directives needed for routing, and performs the initial navigation based on the current browser URL.

2-2. Add RouterOutlet

라우터 설정을 했으면 이제 라우터를 사용할 수 있습니다.

라우트를 사용할 수 있다는 말은, RouterModule의 명령어들을 사용할 수 있다는 뜻인데요.

대표적으로 RouterOutlet이 있습니다.

Acts as a placeholder that Angular dynamically fills based on the current router state.

얘는 현재 router 상태에 따라서 동적으로 변할 파일(Component)의 위치입니다.

사용예제)


<!-- app.component.html -->
<h1>{{ title }}</h1>
<router-outlet></router-outlet>
<app-messages></app-messages>

이렇게 놔두면, 라우터 상태에 따라서 바뀌는 컴포넌트가

router-outlet 태그 아래에 위치하게 됩니다.

이제 링크를 이동하면서 체크해봅시다.

  1. /ok로 이동하기.

    3

    ok라는 녀석이 매치가 되지 않기 때문에 에러가 나면서 메인페이지로 돌아왔습니다.

    메인페이지에는 컴포넌트가 배정되지 않기 때문에 타이틀만 뜹니다.

    (데이터도 로드안됬으므로 메세지도 안뜬 모습)

  2. /heroes로 이동하기

    => 이때는 정상적으로 heroes 컴포넌트가 router-outlet 태그 밑에 정상적으로 출력되는 모습입니다.

4

그런데 아직 잘 감이 안옵니다.

다른 라우트와 컴포넌트를 추가해야 감이 올 것 같습니다.

Dashboard 컴포넌트와 라우트를 추가해봅시다.

2-3. add dashboard

  1. dashboard 컴포넌트를 생성한다

  2. hero 서비스를 이용해서 영웅들 5개만 가지고 온다.

    export class DashboardComponent implements OnInit {
  heroes: Hero[] = [];
  constructor(private heroService: HeroService) { }
  ngOnInit() {
    this.getHero();
  }
  getHero(): void {
    this.heroService.getHeroes()
      .subscribe((heroes) => (this.heroes = heroes.slice(5)));
  }
}

  3. 그 영웅들 5개의 이름만 출력한다.

       
<ul>
  <li *ngFor="let hero of heroes">
    <strong>{{hero.name}}</strong>
  </li>
</ul>

  4. dashboard component로 이동하는 라우트를 만들어준다.

    const routes: Routes = [
  { path : 'heroes', component : HeroesComponent },
  { path: 'dashboard', component: DashboardComponent },
]

이제 /dashboard로 이동해보면,

5

heroes 컴포넌트에 해당하는 부분만 쏙 dashboard 컴포넌트로 바뀌었음을 알 수 있습니다.

이제 RouterModule의 다른 명령어인 RouterLink에 대해서 알아보도록 합시다.

Lets you link to specific routes in your app.

이 녀석은 특정한 라우트로 이동할 수 있는 링크를 만들어주는 역할입니다.

(a태그의 href 속성을 안쓰는 이유는.. 새롭게 페이지를 렌더해야하기 때문입니다. 자바스크립트를 쓸 이유가 없죠!)

사용예제)

<a [routerLink]="['/user/bob']">link to user component</a>

일단은 static page로 이동하는 링크 예제입니다. dynamic page로 이동하는 방식은 다음 포스트에 할 것 같습니다.

간단하게는 이렇게 적어도 됩니다.

<ul>
    <li>  <a routerLink="/heroes">Heroes</a> </li>
    <li>  <a routerLink="/dashboard">Dashboard</a> </li>
</ul>

그러면 이제 새로운 링크들이 생기고, 얘들을 통해서 컴포넌트들을 로드할 수 있습니다.

comments powered by Disqus