[Angular-11]angular route

JavaScript와 HTML, CSS등에 대해서는 일체 다루지 않는다.

기초지식은 다른 강의를 참조하도록 하라.

또한 Angular에서는 JavaScript로 번역되는 TypeScirpt라는 새로운 언어를 사용한다.

이 언어는 JavaScript에 Type을 추가한 언어로 좀더 객체지향적인 설계가 가능한 언어이다.

이 언어에 대해서 조금씩의 설명은 있겠지만 자세한 설명은 다루지 않을 계획이다.

필자는 아직 이 TypeScript를 강의로 제공할 생각이 없으므로 자세히 알고싶다면

https://www.typescriptlang.org/

를 참조하라.

angular에서 라우팅에 대해서 알아보도록하자.

라우팅을 프론트엔드에서 한다는게 말이 안된다고 생각할 수 있다.

그러나 히스토리, 혹은 해시를 이용해서 프론트에서 라우팅을 할 수 있다.

라우팅에 대한 상세한 설명을 [Vue-11]Router에서 했었음으로 참고하면 도움이 된다.

이제 라우팅을 위해서 한번 프로젝트를 만들어서 테스트해보도록 하자.

ng new <어플리케이션 명>

만들고 나면 위와 같이 만들어진다. 자주 만들어서 흔한 일이다.

테스트를 위해서 컴포넌트를 2개 만들어보자.

ng g c <컴포넌트명>

각각에 표현할 내용은 아래와 같다.

<!--one.component.html-->
<h1 class="one">One Component</h1>

/*one.component.css*/
.one{
  background : red
}

<!--two.component.html-->
<h1 class="two">Two Component</h1>

/*two.component.css*/
.two{
  background : cornflowerblue;
}

테스트때는 2개의 컴포넌트를 쓰게된다.

내부적으로 손댈것은 크게 없다.

그럼 이제 Route파일을 만들도록 해보자.

새로 파일을 만든다. 이름은 아래와 같이 한다.

<컴포넌트명>.routing.ts

이 파일 역시 타입 스크립트 파일이다.

만들 파일은 routing.ts파일로 만들게 되면 위와 같이 만들어진다.

모듈로 만드는 방법도 있기에 하고싶은데로 하면된다.

// app.routing.ts
import {Routes, RouterModule} from '@angular/router';
import {OneComponent} from './one/one.component';
import {TwoComponent} from './two/two.component';

const routes: Routes = [
  {path: 'one', component: OneComponent},
  {path: 'two', component: TwoComponent}
];
export const routing = RouterModule.forRoot(routes);

이제 해당 부분을 채워넣자.

해당 클래스들을 import시켜주고 Routes클래스 형태로 routes 배열을 만든다.

이때 path는 url을 의미하면 component는 그 url을 호출했을 시 화면에 뿌려줄 컴포넌트를 의미한다.

마지막으로 모듈을 export시켜주는데 RouterModule.forRoot(routes)구문을 사용한다.

forRoot메소드를 통해서 라우팅을 붙혀주면 root에 붙혀지게된다.

// app.module.ts
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

import {AppComponent} from './app.component';
import {OneComponent} from './one/one.component';
import {TwoComponent} from './two/two.component';
import {routing} from './app.routing';


@NgModule({
  declarations: [
    AppComponent,
    OneComponent,
    TwoComponent
  ],
  imports: [
    BrowserModule,
    routing
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

해당 routing을 imports시켜주자.

이제 메인 component를 수정하자.

<!--app.component.html-->
<a [routerLink]="['/one']">One Route</a>
<a [routerLink]="['/two']">Two Route</a>
<router-outlet></router-outlet>

새로운 개념이 있다. 두 개념에 대해서 알아보도록하자.

routerLink : 특정 url과 매핑이 되며 그 url 선택시에 router-outlet에 렌더링됨

router-outlet : 특정 routerLink클릭시에 표시될 공간

이제 ng serve로 테스트 해보자.

시작하면 위와같이 뜬다.

이제 클릭해보자

url도 바뀌고 해당 컴포넌트가 렌더링 된걸 확인할 수 있다.

다른 컴포넌트를 선택시에도 url이 바뀌고 렌더링됨을 확인할 수 있다.