New Toronto Group
 - New Toronto Group

Localizing AngularJS Applications with i18n Multi-Language Translations

| Posted on February 14th, 2014 by Chad Upton


Whether your AngularJS application is on the public internet or a private intranet, it may require multiple language support. I have extensively researched this topic and found the best solution: a library called Angular Translate. The nice thing about this library is that it handled every situation I could throw at it. You want to translate text inside of an ngRepeat? Sure. You need to translate text within a bootstrap tab label? No problem. How about translating text in a client-side generated Raphael SVG image ? Easy!

Now, I say “translate” but I should clarify that this library doesn’t literally translate words between languages, you provide the translations in your required languages and it injects the one for the language you (or the user) selects. The idea is that you have translation tables for all the words in your app and then Angular Translate will inject the word for the selected language where you place a translation key.

Think of the translation keys as placeholders. If you have a “Logout” button on your site, you’d code the html with a translation key such as “LOG_OUT”. Then you’d map that key to the actual word in each language in your translation files. When the application runs, the library will insert the word where the key is in the page — it holds a spot for the translated word and allows the library to know what and where it should go.

The docs are very thorough, showing you how to provide translations in various different configurations (flat files, js arrays, etc) and also a variety of options for bootstrapping translation keys at run time (text values, attributes, interpolation, etc).

All of these scenarios are covered in the excellent angular translate docs; however, one scenario I didn’t see an example of in the guide is how to call the library directly with a translation key and receive the translation. All of the examples I saw just showed how to replace keys within HTML, here’s how to do it in JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13

myApp.directive('maFooter', ['$rootScope', '$translate', function ($rootScope, $translate) {
    return {
        restrict : 'EA',
        templateUrl : 'views/templates/footer.html',
        transclude : true,
        scope : {
            data : '='
        },
        link : function (scope, element, attrs) {
            scope.logoutButtonLabel = $translate('LOG_OUT');
        }
    }
}];

In the above code, you’ll see the code is in a directive. I’ve added $translate as a dependency and on line 10 I’m calling the $translate library with my translation key. It will return the proper word from the translation file I provided for the currently selected language.

That’s how you call the translate library directly without expecting it to replace a key in your html.

Posted in angular translate, AngularJS, i18n, localization, pascalprecht, translation  | Comments (1)

Comments (1)

  1. Pascal Precht:
    Jun 16, 2014 at 10:15 AM

    Hey, thank you for your great article!

    I think it's worth mentioning, that since version 2.0, the `$translate` service returns a promise since it's a possible asynchronous operation if there are loaders registered.

    So your mentioned call would rather look like this:

    $translate('foo').then(function (translation) {
    // do sth. with translation
    });

    Also, you said you couldn't find anything about how to use `$translate` service. Actually there's an entire chapter about it :) http://angular-translate.github.io/docs/en/#/guide/03_using-translate-service


Add a Comment





To use reCAPTCHA you must get an API key from http://recaptcha.net/api/getkey

Allowed tags: <b><i><br>Add a new comment: