fbpx Skip to content

Aquent | DEV6

Localizing AngularJS Applications with i18n Multi-Language Translations

Written 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:

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.

Sign up for our Angular Course

Learn the most recent version and start building your own Angular apps

view course details