Routing & Binding

하나의 Templete에 compoent를 여러개 정의가 가능 합니다.

브라우저상에서 다른 영역은 그대로 있고 한 영역의 컨테츠만 바꾸는 형태는 <select> 대신 <router-outlet>를 사용합니다.

 

<router-outlet></router-outlet>에 여러개의 component를 URL에 따라서 변경하고 싶을때 Routing을 사용합니다.

 

ng g component test // 하나의 component를 생성 합니다
ng g component test1 // 하나의 component를 생성 합니다

const routes : Routes = [
{path:'test', component : 'TestComponent'},
{path: 'test1', compoenent : 'Test1Component'}]

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

export class AppRoutingModule { }

 

전통적인 서버 사이드 랜더링을 하는 웹 사이트는 주소가 바뀔때마다 서버에 전체 페이지를 요청하고, 전체 화면을 랜더링 합니다.