i18n Internationalisation

By using AngularJS the most appropriate option seems to be https://angular-translate.github.io/. What is interesting with it, in addition to its features, is the possibility to use it as a service (to translate strings inside the code) or as a filter/directive to directly manage translation at the view level (avoiding binding your translation too hard to controllers).

We already implemented it in a MEAN.IO stack on a project where we have a 'core' package configuring it like this:

angular.module('mean.core')
    .config(['$httpProvider', '$translateProvider', function($httpProvider, $translateProvider){
        $translateProvider.useLocalStorage();
        $translateProvider.determinePreferredLanguage();
        $translateProvider.fallbackLanguage(['fr_FR']);
        $translateProvider.useLoader('$translatePartialLoader', {
            urlTemplate: '{part}/i18n/{lang}.json'
        });
    }])

This means that the translations will not be given as a big key-value map for each langage but in separate pieces (i.e. 'parts'). These parts will be lokked for in the {part}/i18n folder, one JSON file per langage. The most simple thing is to have one part per MEAN.IO module, containing all the translations for the module. You then declare translations of a given module (e.g. 'gui') like this:

angular.module('mean.gui')
    .config(['$translatePartialLoaderProvider', function($translatePartialLoaderProvider){
        $translatePartialLoaderProvider.addPart('gui');
    }]);

The translation object of a module looks like this:

{
  "gui": {
	"ABOUT_APP": "A propose de l'application",
	...
  }
}

You use a translation of a module in the views like this:

<div class="jumbotron">
    <div class="row">
        <h2 class="col-xs-12">{{'gui.ABOUT_APP' | translate}}</h2>
    </div>
    <div class="row" ng-transclude></div>
</div>