해피그래머

Angular 2 RC5의 업데이트 소식 본문

Angular 2

Angular 2 RC5의 업데이트 소식

해피그래머 happygrammer 2016.08.10 13:28

Angular 2는 8월 9일 부로 RC4에서 RC5로 업데이트 되었습니다. RC5의 가장 큰 특징은 NgModule 장식자가 추가 되었다는 점입니다.

1) @NgModule 장식자 지원

NgModules의 장점은 사전 컴파일(Ahead of Time compilation) 방식을 이용해 전체적인 어플리케이션 속도가 올라갑니다. NgModule 장식자는 다음과 같이 사용합니다. NgModule 장식자가 도입 됨으로서 기능상의 어떤 이점들이 있는지 살펴보겠습니다.


app.module.ts

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ MyComponent, 사용자의 컴포넌트 .... ],
  providers: [ 서비스들...]
  bootstrap: [ AppComponent  ]
})
class MyAppModule {}

app.module.ts 파일은 main.ts에서 다음과 같이 가져올 수 있습니다.

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

2) 공유모듈지원

공유모듈(shared module)이 등장한 이유는 컴포넌트 마다 빈번히 가져다 쓰는 파이프나 컴포넌트, 지시자 선언의 불편함을 해소 하기 위해서입니다. 

Shared 모듈을 등록해 둔다면 FormsModule, RouterModule, Material Design modules를 보다 쉽게 이용할 수 있게 되었습니다. 예전에는 어땠을까요? 디자인모듈(material design modules)을 컴포넌트 마다 호출 해야 했습니다. 예제 코드는 다음과 같습니다.

import {Component} from ‘@angular/core’
import {MD_BUTTON_DIRECTIVES} from ‘@angular-material2/button’
import {MD_SIDENAV_DIRECTIVES} from ‘@angular-material2/sidenav’
import {MD_CARD_DIRECTIVES} from ‘@angular-material2/card’
import {provideRouter, ROUTER_DIRECTIVES} from ‘@angular/router’
@Component({
  selector: ‘my-component’,
  providers: [ provideRouter(routeConfig) ],
  directives: [
    MD_BUTTON_DIRECTIVES,
    MD_SIDENAV_DIRECTIVES,
    MD_CARD_DIRECTIVES,
    ROUTER_DIRECTIVES
  ]
})
class MyComponent {}

컴포넌트 마다 반복적인 호출이 많았습니다. Shared 모듈을 이용해 봅시다. Shared 모듈은 RouterModule.forRoot를 이용해 설정을 넘겨 주는 것 입니다.

import {Component} from ‘@angular/core’
import {MdButtonModule} from ‘@angular-material2/button’
import {MdSideNavModule} from ‘@angular-material2/sidenav’
import {MdCardModule} from ‘@angular-material2/card’
import {RouterModule} from ‘@angular/router’
@NgModule({
  imports: [
    MdButtonModule,
    MdSideNavModule,
    MdCardModule,
    RouterModule.forRoot(routeConfig)
  ]
})
class MyAppModule {}

shared 모듈 을 이용하면모든 컴포넌트가 모듈에 접근할 수 있습니다. 기존에 불편했던 점은 컴포넌트 마다 지시자를 반복적으로 선언했었는데 이제는 그러지 않아도 됩니다. 이렇게 간단한 표현을 사용할 수 있는 것 입니다.

@Component({
  selector: ‘my-component’,
  templateUrl: ‘my-component.html’
})
class MyComponent {}

3) NgModule를 이용한 느린로딩 지원

NgModule 장식자는 라우터를 통해 느린로딩을 지원합니다. 코드를 통해 살펴보면 다음과 같습니다.

import {platformBrowser} from ‘@angular/platform-browser’
import {MyAppModuleNgFactory} from ‘./app.ngfactory’ //generated code
platformBrowser().bootstrapModuleFactory(MyAppModule);

import {RouterModule} from ‘@angular/router’
import {NgModule} from ‘@angular/core’
@NgModule({
  declarations: [ MyComponent, MyHomeRoute ],
  bootstrap: [ MyComponent ],
  imports: [
    RouterModule.forRoot([
      { path: ‘home’, component: MyHomeRoute },
      { path: ‘lazy’, loadChildren: ‘./my-lazy-module’ }
    ])
})
class MyAppModule {}

위 코드에서 loadChildren 프로퍼티는 하위 자식모듈인 my-lazy-module을 호출합니다. 그리고 my-lazy-module 하위에도 다음과 같이 라우팅을 선언할 수 있습니다. my-lazy-module 내부는 다음과 같습니다.

import {RouterModule} from ‘@angular/router’
import {NgModule} from ‘@angular/core’

@NgModule({
  declarations: [ MyLazyHome, MyLazyChild ],
  imports: [
    RouterModule.forChild([
      { path: ‘’, component: MyLazyHome },
      { path: ‘a’, component: MyLazyChild }
    ])
  ]
})
class MyLazyModule {}

RC6 버전 이후부터는 NgModule을 이용하는 이유로 컴포넌트 메타데이터에는 더이상 directives, pipes 를 선언할 수 없습니다. RC5에서는 일시적으로 지원됩니다. RC6 이후에는 컴포넌트 메타데이터에서 directives와 파이프를 선언하지 않습니다. RC6 업데이트 전에 컴포넌트에 호출했던 지시자나 파이프 관련 호출들은 NgModule의 declarations 프로퍼티로 옮겨 두는 것이 필요해 보입니다.

관련링크

본 게시물과 관련해 보다 자세한 내용은 다음 문서들을 참고할 수 있습니다.

RC4에서 RC5로 마이그레이션

https://angular.io/docs/ts/latest/cookbook/rc4-to-rc5.html

RC5 라이브데모

https://angular.io/resources/live-examples/toh-5/ts/plnkr.html

업데이트 관련문서

https://angular.io/docs/ts/latest/cookbook/rc4-to-rc5.html https://github.com/angular/angular/blob/master/CHANGELOG.mdhttp://angularjs.blogspot.kr


Angular2Korea

0 Comments
댓글쓰기 폼