request feature: add internationalization(i18n) support on server and client side

Right now I'm struggling with this approach. I want to know what are thought about this approach from contributors and users that know something about it. Or I'll take other better suggestions about implementing i18n support in Angular and Node + Express engine.

[azachar]

Hmm, interesting... how about to integrate https://angular-gettext.rocketeer.be/ instead? It would work just in Angular, but I guess that is all you need.

[etiennetremel]

I would suggest using Angular Translate instead. Here is how I deal with translation for the Frontend part:

1. Install Bower dependencies:

   bower install -S angular-translate

   bower install -S angular-translate-loader-static-files

   bower install -S angular-translate-loader-partial

2. Create a i18n folder in your client directory: /client/i18n

3. Configure Angular Translate in /client/app/app.js:

   angular.module('myApp', [
     // ...
     'pascalprecht.translate'
   ])
   
   .config(['$translateProvider', function ($translateProvider) {
   
     // Configure Angular Translate
     $translateProvider.useLoader('$translatePartialLoader', {
       urlTemplate: 'i18n/{part}/{lang}.json'
     });
   
     // Set default translation
     $translateProvider.preferredLanguage('en_US');
   
   }])
   
   

4. Create a RequireTranslations Service

   // Require translations
   .factory('RequireTranslations', ['$translatePartialLoader', '$translate', function ($translatePartialLoader, $translate) {
     return function () {
       // Add Global translation
       $translatePartialLoader.addPart('app');
   
       // Add partials
       angular.forEach(arguments, function (translationKey) {
         $translatePartialLoader.addPart(translationKey);
       });
       return $translate.refresh();
     }
   }])
   

5. For each routes, add a directory into i18n with corresponding translation file as follow:
   Angular application:

   |- client
   |  |- app
   |  |  |- page
   |  |  |  |- home
   |  |  |  |  |- home.controller.js
   |  |  |  |  |- home.html
   |  |  |  |  |- home.scss
   |  |  |  |- about
   |  |  |  |  |- about.controller.js
   |  |  |  |  |- about.html
   |  |  |  |  |- about.scss
   |  |  |  |- page.js
   

   Corresponding Translation:

   |- client
   |  |- i18n
   |  |  |- app                // Global translation, used on every routes
   |  |  |  |- en_US.json
   |  |  |  |- fr_FR.json
   |  |  |- page               // Specific translation only loaded if loading the corresponding template
   |  |  |  |- home
   |  |  |  |  |- en_US.json
   |  |  |  |  |- fr_FR.json
   |  |  |  |- about
   |  |  |  |  |- en_US.json
   |  |  |  |  |- fr_FR.json
   

6. Then, for each route, resolve the translation file /client/app/page/page.js:

   .config(function ($stateProvider) {
     $stateProvider
       .state('app.home', {
         url: '/',
         templateUrl: 'app/page/home/home.html',
         controller: 'HomeCtrl',
         resolve: {
           translation: function(RequireTranslations) {
             return RequireTranslations('page/home');
           }
         }
       })
       .state('app.about', {
         url: '/about',
         templateUrl: 'app/page/about/about.html',
         controller: 'AboutCtrl',
         resolve: {
           translation: function(RequireTranslations) {
             return RequireTranslations('page/about');
           }
         }
       });
   })
   

7. To switch between languages, in your nav bar controller you can mix this code with a ng-click:

   $scope.changeLanguage = function (key) {
     $translate.use(key);
   };
   

Hope this can help.

[azachar]

I do not like Angular Translate.

Angular-gettext let's you focus on developing your application. Just write your code ... No need to maintain translation keys or magic values, that just causes headaches!

[fiznool]

+1 for angular-gettext. Much easier to work with.

[dmarcelino]

+1 for angular-gettext. I haven't tried Angular Translate but I can say angular-gettext is easy to setup and simple to use.

[Awk34]

Anyone know if there are any significant performance differences between them?

[azachar]

Well, angular gettext is quite fast so far, but it is just my personal experience, no real hard data to compare, if you want look for example at www.slacklinefestivals.com, so far it was translated into 9 languages and it works quite nice :)

What I like the most is that you do not think in KEY=VALUE paradigm. You just focus on your html in English and all your keys are extracted from your current text that is actually the key.