[Angular] routerLink, Router.navigate or navigateByUrl

■ 라우팅 설정#1 - 템플릿에서 "routerLink" 속성으로 이동하기

 

1. 모듈(NgModule)에서 import, export 프로퍼티에 "RouterMoudule"을 추가해야 한다.

 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router'; // 라우터 관련 심볼을 로드합니다.

const routes: Routes = []; // 라우팅 규칙은 이 배열에 등록합니다.

// NgModule의 imports, exports 배열에 RouterModule을 등록합니다.
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

 

2. 라우팅 규칙을 배열에 등록해야 한다. 

 

const routes: Routes = [
  { path: 'first-component', component: FirstComponent },
  { path: 'second-component', component: SecondComponent },
];

 

3. 라우팅 규칙을 템플릿에 등록한다.

     ① a 태그 속성으로 "routerLink"를 추가하고 컴포넌트를 추가한다. (경로 설정)

     ② <router-outlet></router-outlet>을 템플릿에 추가한다. (설정한 경로에 맞는 컴포넌트가 그려질 곳이다.)

     ③ 해당 모듈에 "RouterModule"을 import 해와야 한다.

 

<h1>Angular Router App</h1>
<!-- 아래 링크를 클릭하면 AppRoutingModule에 등록된 라우팅 규칙에 따라 화면을 전환합니다. -->
<nav>
  <ul>
    <li><a routerLink="/first-component" routerLinkActive="active" ariaCurrentWhenActive="page">First Component</a></li>
    <li><a routerLink="/second-component" routerLinkActive="active" ariaCurrentWhenActive="page">Second Component</a></li>
  </ul>
</nav>
<!-- 라우팅된 화면은 <router-outlet> 위치에 표시됩니다. -->
<router-outlet></router-outlet>

 

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { 컴포넌트 } from '.컴포넌트 경로';
import { RouterModule } from '@angular/router';



@NgModule({
  declarations: [
    컴포넌트
  ],
  imports: [
    CommonModule,
    RouterModule // 이 부분
  ]
})
export class StopwatchModule { }

 

공식문서 참고링크

 

■ 라우팅 설정#2 - 컴포넌트에서 Router.navigate로 이동하기

@angular/router

router메서드 "navigateByUrl"에 경로를 인자로 넣어주면 된다. 이때 Router를 constructor에 주입해줘야 한다.

 

템플릿 부분 html

 

<button (click)="goStopwatch()">스탑워치로 이동</button>

 

컴포넌트 부분 ts

 

import { Router } from '@angular/router';

export class ClockComponent {

  constructor(private router: Router){

  }

  goStopwatch(){
    this.router.navigateByUrl("/stopwatch");
  }
}

 

Router에는 엄청 많은 메서드가 내장되어 있다. 그 중 대표적으로 navigateByUrl과 navigate가 있다.

자세한 내용은 공식문서를 봐주십시오.

 

navigateByUrl과 navigate은 서로 두 개의 인자를 받을 수 있다.

 

 

---

 

"Angular Router는 라우팅 규칙 중 첫번째로 매칭되는 라우팅 규칙을 적용하기 때문에 라우티 규칙을 등록하는 순서가 중요한데, 구체적인 라우팅 규칙을 가장 먼저 등록하고 덜 구체적인 라우팅 규칙을 나중에 등록하는 것이 좋습니다. 그래서 고정된 주소를 먼저 등록하며, 그 다음에 빈 주소를 등록하고, 마지막으로 기본 라우팅 규칙을 등록합니다. 그리고 브라우저가 접속한 주소에 해당하는 라우팅 규칙이 하나도 없을 때 적용되는 와일드카드 라우팅 규칙은 가장 마지막에 작성합니다."

 

앵귤러 공식문서에서는 라우팅 규칙 적용순서를 아래와 같이 설명한다...

Router는 라우팅 규칙 중 첫번째로 매칭되는 라우팅 규칙을 적용하기 때문에 라우팅 규칙을 등록하는 순서가 중요하다. 구체적인 라우팅 규칙을 가장 먼저 등록하고 덜 구체적인 라우팅 규칙을 나중에 등록하는 것이 좋다. 순서는 아래와 같다.

 

① 고정된 주소를 먼저 등록한다.

② 빈 주소를 등록한다.

③ 기본 라우팅 규칙을 등록한다.

④ 와일드카드 라우팅 규칙을 가장 마지막에 등록한다.

 

---

 

지연로딩(Lazy Loading Module) (공식문서)

"기본적으로 NgModule은 즉시 로드 됩니다. 이 말은 앱이 로드되면 사용여부와 관계없이 앱에 있는 NgModule이 모두 로드된다는 것을 의미합니다. 이 때 앱 구조가 복잡해서 라우팅 규칙도 복잡하다면 지연 로딩(lazy-loading)을 활용해서 당장 사용하지 않는 모듈을 나중에 로드하는 방법을 고려해볼 수 있습니다. 지연 로딩을 활용하면 앱 초기 실행에 필요한 빌드 결과물 크기가 작아지기 때문에 앱 초기 실행 시간을 줄일 수 있습니다."

 

const routes: Routes = [
  {
    path: 'items',
    loadChildren: () => import('./items/items.module').then(m => m.ItemsModule)
  }
];

 

---

 

허가되지 않은 접근 차단하기(공식문서)

1. 로그인하지 않은 사용자가 어떤 컴포넌트로 이동하려는 경우
2. 로그인 한 사용자가 권한이 있는지 확인해야 하는 경우
3. 컴포넌트를 표시하기 전에 데이터를 먼저 불러와야 하는 경우
4. 컴포넌트를 벗어나기 전에 변경한 내용을 저장해야 하는 경우
5. 저장하지 않는다면 변경한 내용을 폐기할지 사용자에게 확인을 받아야 하는 경우

 

라우팅 가드(공식문서)

인터페이스 : canActivate, canActivateChild, canDeactivate, resolve, canLoad, canMatch

 

---