angular-translate를 이용해서 Angular 앱에 국제화(i18n) 적용하기

개요

여러 언어를 지원하는 Angular 앱을 만들려면 i18n을 지원하는 모듈이 필요합니다. 찾아 보면 여러 가지가 있겠지만 여기에서는 angular-translate라는 모듈을 소개합니다.

angular-translate는 최소한의 기능만 간편하게 사용하거나, 따로 제공되는 여러 확장점을 이용해서 강력하고 복잡한 기능을 구현할 수 있는 유연한 모듈입니다.

angular-translate 홈페이지로 이동

설치

Bower를 이용해서 설치할 수 있습니다. Bower를 설치한 후 아래의 명령을 실행하면 됩니다.

$ bower install angular-translate

간단 사용법

먼저 angular-translate.js의 경로를 명시한 script 태그를 angular.js 뒤에 넣어줍니다.

<script src="angular.js"></script>
<script src="angular-translate.js"></script>

pascalprecht.translate 모듈에 대한 의존성을 설정해 줍니다.

var app = angular.module('myApp', ['pascalprecht.translate']);

번역어 목록(translation table)을 작성하고 이를 language key en과 함께 $translateProvider의 translations 메소드로 전달합니다. 아래 예제에서는 영어(en)에 대한 번역어 목록만 전달했지만 여러번 호출하여 다른 언어에 대한 번역어 목록도 추가로 전달할 수 있습니다.

$translateProvider의 preferredLanguage 메소드에 language key en을 전달하여 영어를 기본 언어로 설정합니다.

var app = angular.module('myApp', ['pascalprecht.translate']);

var translations = {
    HEADLINE: 'What an awesome module!',
    PARAGRAPH: 'Srsly!',
    NAMESPACE: {
        PARAGRAPH: 'And it comes with awesome features!'
    },
    PASSED_AS_TEXT: 'Hey there! I\'m passed as text value!',
    PASSED_AS_ATTRIBUTE: 'I\'m passed as attribute value, cool ha?',
    PASSED_AS_INTERPOLATION: 'Beginners! I\'m interpolated!'
};

app.config(['$translateProvider', function ($translateProvider) {
    $translateProvider
        .translations('en', translations)
        .preferredLanguage('en');
}]);

이제 filter, directive, interpolation을 아래와 같이 사용하면 번역어가 출력됩니다.

<p>{{ 'HEADLINE' | translate }}</p>
<p>{{ 'PARAGRAPH' | translate }}</p>

<p translate>PASSED_AS_TEXT</p>
<p translate="PASSED_AS_ATTRIBUTE"></p>
<p translate>{{ 'PASSED_AS_INTERPOLATION' }}</p>
<p translate="{{ 'PASSED_AS_INTERPOLATION' }}"></p>

angular-translate 사이트의 Using translate directive 페이지로 이동한 후 하단에 있는 Source 부분 우측에 있는 Edit를 클릭 후 다시 In JsFiddle을 클릭하면 동작하는 예제를 볼 수 있습니다.

여기까지 간단한 angular-translate 사용법이었습니다.