Angular 앵귤러 배우기 - 5 라우팅 Routing

하나의 템플릿에 컴포넌트를 여러개정의할수있습니다

브라우저상에서 다른영역은 그대로있고 한영역의 컨텐츠를 갈아끼우는방식으로 교체하려면 셀렉터태그 대신 

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

우선 app.component.html 파일을 수정합니다

<nb-layout>

  <nb-layout-header fixed>
    네비게이션
  </nb-layout-header>


  <nb-layout-column>
    <h1>이것은 App 컴포넌트</h1>

    <router-outlet></router-outlet>

  </nb-layout-column>

  <nb-layout-footer fixed>
    create by dduruddung
  </nb-layout-footer>


</nb-layout>

그럼 브라우저 화면은 이렇게됩니다

그리고  <router-outlet></router-outlet>태그안에 여러컴포넌트를 url에따라서 갈아끼우고 싶을때 라우팅을사용합니다

먼저 교체되는지 확인하기위해서 demo2 컴포넌트를 하나더 생성합니다

명령 프롬프트 ng g c demo2

처음 프로젝트 생성할때 라우팅모듈을사용하겠냐는 물음에 Y Enter했습니다

그래서 app-routing.module.ts 파일이 만들어져있습니다 열어보면

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

const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

routes에 아무것도 정의되지 않았습니다

demo와 demo2컴포넌트 라우팅설정을 해줍니다

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {DemoComponent} from './demo/demo.component';
import {Demo2Component} from './demo2/demo2.component';

const routes: Routes = [
  {path: 'demo', component: DemoComponent},
  {path: 'demo2', component: Demo2Component},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

그리고 브라우저 주소창에

http://localhost:4200/demo

http://localhost:4200/demo2

를 입력하여 변경된 화면을 확인합니다

 <router-outlet></router-outlet>태그안에 url에 따라 컴포넌트가 교체되는것을 확인했습니다

매번url을 칠수없으니 네비게이션을 만듭니다

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { DemoComponent } from './demo/demo.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {NbThemeModule, NbLayoutModule, NbSidebarModule, NbMenuModule} from '@nebular/theme';
import { Demo2Component } from './demo2/demo2.component';

@NgModule({
  declarations: [
    AppComponent,
    DemoComponent,
    Demo2Component
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    NbThemeModule.forRoot({ name: 'default' }),
    NbLayoutModule,
    NbSidebarModule.forRoot(),
    NbMenuModule.forRoot(),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

네뷸라 사이드바모듈,메뉴모듈을 app모듈에 추가합니다

app.component.ts

import { Component } from '@angular/core';
import {NbMenuItem} from '@nebular/theme';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'my-app';

  items: NbMenuItem[] = [
    {
      title: 'demo',
      link: 'demo'
    },
    {
      title: 'demo2',
      link: 'demo2'
    }
  ];
}

메뉴를 정의해줍니다

app.component.html

<nb-layout>

  <nb-layout-header fixed>
    앵귤러 배우기
  </nb-layout-header>


  <nb-layout-column>
    <h1>이것은 App 컴포넌트</h1>

    <router-outlet></router-outlet>

  </nb-layout-column>

  <nb-layout-footer fixed>
    create by dduruddung
  </nb-layout-footer>

  <nb-sidebar>
    <nb-menu [items]="items"></nb-menu>
  </nb-sidebar>
</nb-layout>

네뷸라 사이드바를 추가해줍니다

사이드바태그안에 네뷸라메뉴를 추가해줍니다

app.component.ts에서 정의한 items를 [items]속성에 넣어줍니다

브라우저 화면은 이렇게바뀌었습니다

왼쪽 사이드바의 버튼을 클릭해 보다편하게 앱컴포넌트안에 라우터아울렛영역을 교체할수있습니다