Angular and translations

Question

What are the best practices for text translations in Angular 1.3.15 ? This version of Angular has only partial localisation support with pluralisation and format transformations but no text translations. There are some external libraries like angular-translate and the official library i18n for the future versions of Angular.

1. What is the current best practice for translations?
2. What if there are plans to upgrade from 1.3.15 to 1.4 in the future?

Answer 1

The solution was to use angular-translate for translation files and angular-dynamic-locale for localisation files. The translation engine on angular-translate provides some very useful features that will help you in various scenarios and it seems to be very mature library. No need to migrate it away in the next version of angular. The angular-dynamic-locale uses localisation files provided by the angular-i18 library so it is basically an extension to enable change of localisation programmatically.

Install libraries with bower and load scripts in index.html. Angular-translate uses angular-translate-loader-static-files module to load json-files:

<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-translate/angular-translate.js"></script>
<script src="bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.js"></script>
<script src="bower_components/angular-dynamic-locale/tmhDynamicLocale.min.js"></script>

Load angular-translate and angular-dynamic-locale modules and initialise providers in config to load translations and locale files from localization directory:

var app = angular.module('app', ['pascalprecht.translate', 'tmh.dynamicLocale'])
      .config(function ($translateProvider, tmhDynamicLocaleProvider) {

        $translateProvider
                .useStaticFilesLoader({
                    prefix: 'localization/translations-',
                    suffix: '.json'
                })
                .preferredLanguage('en-US')
                .useSanitizeValueStrategy('escaped') // Security for escaping variables
                .usePostCompiling(true); // Post compiling angular filters

        tmhDynamicLocaleProvider
                .localeLocationPattern('/localization/angular-locale_{{locale}}.js');

    )};

Inject services to controller and load resource files:

app.controller('Ctrl', ['$scope', 'tmhDynamicLocale', '$translate',
    function ($scope, tmhDynamicLocale, $translate) {
        $translate.use('en-US'); // translations-en-US.json
        tmhDynamicLocale.set('en-US'); // angular-locale_en-US.js
}]);

Now the translations and locales works on the template:

// angular-locale_en-US.js 
{{ 100 | currency }} // $100.00

// translations-en-US.json
// "NAME" : "John"
<label translate>NAME</label>
<input type="text" ng-model="name" placeholder="{{ 'NAME' | translate }}">

Answer 2

I too have faced difficulties when trying to internalize single page apps built with angular. As you have correctly pointed out, future versions promises good support for i18n.

In my case, I ended up using filters to translate text. Depending on how much content you have on your app, this may or may not be a good solution.

Following article describes a solution very close to what I have implemented along with couple of other sweet tricks

http://blog.trifork.com/2014/04/10/internationalization-with-angularjs/

I would be very keen to hear from you what approach you took in solving this issue

Cheers