IT 회사에서 즐겁게 지내기!

이번은 새로운 페이지의 추가, 이동 입니다.

웹사이트는 여러 페이지로 이루어져 있습니다.

사용자는 페이지를 이동해가며 사이트를 이용합니다.

Angular에서의 페이지 이동은 Router를 통합니다.

역시 코드와 함께 살펴보겠습니다.

1. Component 생성

새로운 페이지를 구성할 컴포넌트를 생성합니다.

angular-cli 를 이용하여 생성하겠습니다.

(Angular 새로 Component 만들기)

ng g c setting

실행하면 setting 컴포넌트가 생성됩니다.

2. Import Routes, RouterModule

angular 모듈을 import 합니다.

app.module.ts 파일을 수정합니다.

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

간단하죠?

3. Routes, RouterModule 설정

이제 컴포넌트와 주소를 연결해줄 Routes를 만듭니다.

자바스크립트 객체의 배열로 생성하면 됩니다.

{ path: 주소이름, component: 컴포넌트 }

주소이름은 맨 앞의 / 를 생략한 상태로 씁니다.

/는 빈 문자열 /config는 'config' 라고 입력합니다.

그리고 NgModule의 imports에 RouterModule을 추가합니다.

생성한 Routes를 인자로 forRoot 메서드를 호출합니다.

import { Routes, RouterModule } from '@angular/router';
...
const appRoutes : Routes = [
  { path: '', component: BudgetComponent },
  { path: 'config', component: SettingComponent }
]

@NgModule({
  ...
  imports:[
    ...
    RouterModule.forRoot(appRoutes),
    ...
  ],
  ...
})
export class AppModule { }

위와 같이 설정하면 아래와 같이 맵핑됩니다.

{서버주소} 는 BudgetComponent

{서버주소}/config 는 SettingComponent

4. Template 변경

이제 주소에 따라 다른 컴포넌트가 보여져야합니다.

따라서 화면에도 변경이 필요하겠죠?

<router-outlet> 이라는 태그를 사용합니다.

이곳에 컴포넌트를 render 하라는 directive 에요.

<div class="mat-app-background">
    <div class="mat-elevation-z4">
        <app-header></app-header>
    </div>
    <router-outlet></router-outlet>
</div>

위와 같이 하면 완성입니다.

주소에 따라 다른 컴포넌트가 보여집니다.

router 동작 화면

사실 위처럼 주소를 외워서 이동하지는 않죠?

다음에는 화면 버튼을 통한 이동을 해볼게요.

로딩하는 하얀 화면 동작도 없어질 겁니다.

소스주소: https://github.com/jsrho1023/account-book