Angular 기본 구조 이해 #2

앞에서는 페이징 단위에서의 이벤트 처리 및 DI를 설명했는데요.

이어서 Injection과 Routing을 설명하겠습니다.

 

 

※ Service Injection

component와 module이 angular 프로젝트에서 반드시 정의되어야 하는 것에 비해

Service depandency injection 및 Routing은 부가적인 요소입니다. 없어도 작동은 하죠.

다만 Spring 같이 견고한 App을 원하신다면 반드시 필요한 요소겠지요?

앞의 단계가 jsp 코딩을 통한 MVC 모델 1 에 비유된다면

이번 단계는 Spring의 핵심 기능을 사용하는 것과 같다고 생각하시면 됩니다.

 

Service 클래스의 예시 입니다.

import { Injectable } from '@angular/core';

import { Hero } from './hero';
import { HEROES } from './mock-heroes';

@Injectable()
export class HeroService {
  getHeroes(): Promise<Hero[]> {
    return Promise.resolve(HEROES);
  }
}

Service 클래스는 전형적인 typescript 코딩으로만 구성됩니다.
대신 클래스 선언 바로 앞에서 @Injectable()을 선언하는데요.

이 선언부를 통해 Module이 해당 서비스를 DI의 대상으로 판단합니다.

 

import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { FormsModule }    from '@angular/forms';
import { RouterModule }   from '@angular/router';

import { AppComponent }        from './app.component';
import { HeroDetailComponent } from './hero-detail.component';
import { HeroesComponent }     from './heroes.component';
import { HeroService }         from './hero.service';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot([
      {
        path: 'heroes',
        component: HeroesComponent
      }
    ])
  ],
  declarations: [
    AppComponent,
    HeroDetailComponent,
    HeroesComponent
  ],
  providers: [
    HeroService
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}

app.module.ts에서 @NgModule의 providers 속성에 추가해주면 해당 서비스를 사용할 수 있습니다.

물론 각 컴포넌트 클래스의 providers 속성에도 추가를 해줘야 하고요.

 

※ Routing

네트워크 조금 아시는 분들은 라우터라는 장비가 떠오르실겁니다.

외부에서 들어온 패킷의 헤더를 해석해서 목적지 컴퓨터의 IP주소를 찾고 패킷을 전달하죠.

 

여기서의 Routing도 비슷한 의미입니다.

다만 여기서의 Routing은 컴퓨터가 아니라 Applcation의 URL을 대상으로 하죠.

또한, 물리적인 라우터와는 다르게 url <-> 컴포넌트 로 1:1 매칭입니다.

 

HTTP 요청을 보낼때 도메인에 해당하는 Root address 뒤에 요청별로 식별자를 더 붙여서 URL로 사용하죠.

도메인이 DNS 및 라우터가 수행하는 네트워크 상에서의 서비스 식별자라면,

URL의 뒷 부분은 서비스 내의 각 요청에 대한 구분자이자 식별자가 됩니다.

 

Angular에서의 Routing은 URL 뒷부분을 식별해서 해당 요청을 수행하는 Component를 로딩합니다.

이후 Component에 정의된 템플릿이 뿌려지고, user event를 수행할 준비를 하게 되는거죠.

 

이 Routing을 정의하는 방법은 두가지가 있습니다.

AppModule을 정의하는 @NgModule decorator에 Routing 모듈을 바로 추가해서 정의하거나,

Routing 모듈을 구체화 한 Custom 모듈을 @NgModule에 추가하는 방식 중에 선택해서 씁니다.

 

const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'hero/:id',      component: HeroDetailComponent },
  {
    path: 'heroes',
    component: HeroListComponent,
    data: { title: 'Heroes List' }
  },
  { path: '',
    redirectTo: '/heroes',
    pathMatch: 'full'
  },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
    // other imports here
  ],
  ...
})
export class AppModule { }

위의 코드는 @NgModule에 바로 Routing을 정의한 것입니다.

해당 path로 호출시 path 마다 지정한 컴포넌트르 호출하라는 방식이죠.

 

커스텀 모듈도 Routing 구성은 똑같습니다.

소스 코드 예시를 보죠.

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

import { CrisisListComponent }   from './crisis-list.component';
import { HeroListComponent }     from './hero-list.component';
import { PageNotFoundComponent } from './not-found.component';

const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'heroes',        component: HeroListComponent },
  { path: '',   redirectTo: '/heroes', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule {}

 

보시면 @NgModule 로 커스텀 모듈을 재정의할 뿐 클래스 내부에서의 코딩은 없습니다.

이제 AppModule의 @NgModule decorator에 다음과 같이 추가해주면 됩니다.

 

imports: [

...

, AppRoutingModule

]

 

이렇게 Routing을 AppModule 정의에서 분리시켰습니다.

물론 Component 선언은 AppRoutingModule, AppModule 둘 다에 해줘야 하는 불편함은 있네요.

이부분은 확인한 다음에 수정하겠습니다.

 

Angular의 기본구조는 이정도로 정리를 마치겠습니다.

참고한 문서는 다음과 같습니다.

1. https://angular.io/guide/router

2. https://angular.io/guide/dependency-injection