앵귤러 라우팅

라우팅이란 출발지에서 목적지까지의 경로를 경로를 결정하는 기능이다.

앵귤러는 SPA를 위한 클라이언트 사이드 네비게이션방식으로 라우터를 제공한다. URL과 컴포넌트의 쌍으로 라우트설정를 설정하여 뷰를 랜더링한다.

// 라우트 설정 예
const routes: Routes = [
  { path: '', redirectTo: '', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'foo', component: FooComponent },
]

---

위치정책

SPA방식은 새로고침을 하면 당연히 첫페이지가 로드되기때문에 앵귤러는 2가지 방법으로 해결책을 제시한다.

PathLocationStrategy
HTML5 pushState메서드를 사용하며 앵귤러 라우터의 기본정책이다.

HashLocationStrategy
해시기반 네비게이션정책으로 URL경로에 프래그먼트식별자(해시뱅)를 사용한다. /#/service, /#/about

---

라우터 구성요소

1. 라우트 구성
2. 라우트 등록
3. 뷰의 렌더링 위치 지정
4. 네비게이션 작성

1. 라우트구성

Route인터페이스의 배열을 사용하여 요청 URL의 경로와 컴포넌트를 매핑한다.

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'service', component: ServiceComponent },
  { path: '**', component: NotFoundComponent },
]

home localhost:4200/home HomeComponent
service localhost:4200/service ServiceComponent

2. 라우트등록 라우트는 모듈단위로 구성하고 모듈을 상위모듈에 등록한다.

admin-routing.module.ts에 라우트를 구성하고 admin-module.ts모듈에 등록한다.

이러한 모듈들을 app.module.ts에 등록하면 어플리케이션에서 라우트구성들을 사용할 수 있다.

3. 뷰의 렌더링 위치 지정

라우트될 뷰의 위치를 저정해야 한다.

<router-outlet></router-outlet>

엘리먼트 바로밑에 컴포넌트가 위치한다.

4.네비게이션 작성

RouterLink디렉티브
입력프로퍼티값을 라우터에게 전달하면 라우터는 해당 컴포넌트를 활성화하고 뷰를 랜더링한다.

RouterLinkActive
RouterLink디렉티브 입력프로퍼티값이 주소창URL에 포함되면 지정 클래스명이 DOM에 추가된다.

<a routerLink="/service" routerLinkActive="active">Service</a>

routerLinkActiveOptions
만약, RouterLink 디렉티브에서 지정한 URL 경로와 정확히 일치할 때만 활성화 시키고 싶다면 routerLinkActiveOptions 디렉티브를 사용한다.

<a routerLink="/service"
   [routerLinkActiveOptions]="{ exact: true }"
   routerLinkActive="active">Service</a>

---

navigate 메서드

템플릿코드에서 컴포넌트전환이 아닌 클래스코드에서 컴포넌트전환을 해야할때 navigate메서드를 사용한다.

this.router.navigate(['path'])

---

라우터상태

컴포넌트전환시 URL이 변경되며 라우트파라미터를 사용해 활성화될 컴포넌트에 데이터를 전달할 수 있다.

<a routerLink="/todo/:id">...</a>

:id 라우터파라미터를 사용한다.

const routes: Routes = [
  { path: '', component: TodosComponent },
  { path: 'todo/:id', component: TodoDetailComponent }, 
]

라우트규칙에도 :id토큰을 사용한다.

<a [routerLink]="['/todo', todoId]">...</a>
<!-- 아래와 같이 구성됩니다. -->
<a routerLink="/todo/10">...</a>

this.router.navigate(['/todo', todoId])

text interpolation을 사용하지 않고 바인딩으로 값을 설정하려면 위와같이 배열형태로 설정하면 된다.

---

라우트 파라미터 취득

활성화된 컴포넌트는 ActivatedRoute객체를 사용해서 라우터의 상태에 접근할 수 있다.

---

라우트 정적 데이터

const routes: Routes = [
  {
    path: 'foo',
    component: FooComponent,
    data: { title: 'Foo',sidebar: true,},
  },
]

라우트규칙에서도 데이터를 전달할 수 있다.

this.id = +this.route.snapshot.paramMap.get('id');

this.data = this.route.snapshot.data;

ActivatedRoute객체의 snapshot프로퍼티를 사용하면 로드후 데이터를 가져올 수 있다.

---

자식 라우트

AppComponent <router-outlet>
 ├────admin <router-outlet>
 │   ├─ admin-dashboard
 │   ├─ manage-heros
 │   └─ manage-crisis
 │
 └─ ───BarComponent <router-outlet>
     ├─ BarChild1Component
     ├─ BarChild2Component
     └─ ...

어플리케이션은 기능들을 모듈화하여 관리하는 것이 효율적이므로 app.component아래에 여러가지 모듈들로 구성된다.

예로 admin ng모듈이 있고 admin컴포넌트는 admin-dashboar,manage-heroes, manage-crisis들을 하위컴포넌트로 가지기때문에 하위컴포넌트를 위한 < router-outlet >엘리먼트를 가질 수 있다.

하위컴포넌트로 구성되면 라우트규칙도 그에 맞게 구성되어야 한다.

  {
    path: 'foo',
    component: FooComponent,
    children: [ // 자식 라우트 구성
      { path: ':id', component: FooChild1Component, },
      { ... },
    ],
  },