Colin's Blog
[angular] AngularJS와 Angular 간의 언어 서비스 및 현지화 호환성

AngularJS와 Angular은 모두 JavaScript 기반의 웹 프레임워크로,
두 프레임워크를 사용하면서 기존의 코드를 최대한 유지하면서 새로운 프로젝트에 Angular로 마이그레이션하는 것이 일반적입니다.

언어 서비스와 현지화는 이러한 마이그레이션 중에 매우 중요한 부분입니다.
AngularJS에서 사용되던 $translate 서비스는 Angular에서 @ngx-translate/core 라이브러리를 사용하여 이와 같은 모듈을 기능적으로 대치할 수 있습니다.

AngularJS의 $translate 서비스


angular.module('app', ['pascalprecht.translate'])
  .config(function ($translateProvider) {
    $translateProvider.translations('en', {
      'TITLE': 'Hello',
      'FOO': 'This is a paragraph.'
    });
    $translateProvider.preferredLanguage('en');
  });

<div>{{ 'TITLE' | translate }}</div>
<div translate="FOO"></div>

Angular의 @ngx-translate/core 라이브러리

import { TranslateModule, TranslateService } from '@ngx-translate/core';
import { HttpClient } from '@angular/common/http';

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

@NgModule({
  imports: [
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ]
})

constructor(private translate: TranslateService) {
  translate.addLangs(['en', 'fr']);
  translate.setDefaultLang('en');
  const browserLang = translate.getBrowserLang();
  translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
}

이와 같이 Angular에서는 @ngx-translate/core 라이브러리를 사용하여 간단한 $translate 서비스와 동일한 작업을 수행할 수 있습니다.

이러한 방식으로 AngularJS와 Angular 간의 언어 서비스 및 현지화 호환성을 유지할 수 있으며, 마이그레이션 과정에서 기존 코드를 쉽게 유지할 수 있습니다.

참고 자료

© 2018 Colin. All rights reserved.