AngularJs 2 - routing

웹페이지의 네비게이션 기능을 제공하는 것이 routing 이다. 이제껏 code example을 제공하는 페이지를 만들었다. 이와는 별도로 code tutorial이라는 페이지를 추가해보자.

이 두 페이지의 접근은 어떻게 될까? 메인 페이지에서 각각의 페이지에 대한 링크(흔히 네비게이션 바라고 한다.)를 제공하고 이걸 클릭하면 각각의 페이지가 보이도록한다.

일단 이런 기능을 하는 메인페이지를 만들고, routing을 붙여보자.

<index.html>

4번째 줄처럼 이 인덱스 페이지가 router의 베이스 path임을 설정해 준다. 그리고 router는 AngularJs의 core 서비스가 아니고 별도로 존재하므로, 20번째 줄에 보이듯이 router.js를 추가해준다. 이글을 쓰고 있는 시점에서 router.min.js는 제대로 동작하지 않는다. 전체 앱에 router객체가 서비스 되도록 main.ts파일을 수정한다.

<main.ts>

router는 콤포넌트이면서 서비스 이다. 따라서 콤포넌트로 사용하기 위한 메타데이타와 서비스로 사용하기 위한 메터데이터 부분을 모두 추가해 주어야 한다. 9번째 줄처럼 서비스로 사용할 수있도록 했다. 원한다면, 하위 콤포넌트에서 providers를 이용해서 사용해도된다. 8번째 줄에서 보듯이 CodeComponent를 MainComponent로 바꾸어 이것이 시작 콤포넌트가 되도록한다.

<main.component.ts>

콤포넌트로 사용하기 위한 13번째 줄이 추가되었고, 각각의 패스들에 대한 정보를 @RouteConfig라는 데코레이션을 사용해 정의했다.

<main.component.html>

routerLink라는 값으로 Tutorial 과 CodeExample을 링크했다. 이는 @RouteConfig에서 "name"에 정의한 값이다. 링크를 클릭했을 때의 결과는 <router-outlet> 이라는 태그 위치에 생성된다.