[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

/*one.component.css*/

. one {

background : red

}

Two Component

/*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를 수정하자.

One Route

Two Route

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

routerLink : 특정 url과 매핑이 되며 그 url 선택시에 router-outlet에 렌더링됨 router-outlet : 특정 routerLink클릭시에 표시될 공간

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

시작하면 위와같이 뜬다.

이제 클릭해보자

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

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

from http://kamang-it.tistory.com/363 by ccl(A) rewrite - 2020-03-06 14:54:40