Internationalization of an Ionic App: Multilanguage Support

By special request, a tutorial on supporting multiple languages in an Ionic app.

4 Likes

There docs are a great guide to how the different parts can be used as well: http://angular-translate.github.io/docs/#/guide

I have my whole app using it with it async loading the language files. Would recommend if you need i18n

does anyone of you have a good way to determine what language the user has, and then take this one?

http://plugins.cordova.io/#/package/org.apache.cordova.globalization

There is a plugin that can give you that

yes i know but i had moderate success with this plugin

What problems were you having with it?

First of all I wanted a return value like en/de/fr and so on but i get en-US or de-DE/de-CH.
And the getCurrencyPattern does also not work probably :frowning:

Auro, you should look at the use() method of $translate service. It just returns current language if called without parameters. An example from my application that works perfectly:

$scope.curlang = $translate.use();

You must inject the $translate service of course in your controller.

The only problem with the module is translation of strings used in the controllers:
http://angular-translate.github.io/docs/#/guide/03_using-translate-service

If you are always getting those results then just substring the first part away and return that.

Haven’t had to deal with currency yet so I haven’t tried that at all.

$translate.use();
give me back the language i’m setting not the system language of the user.

@meiding good point :smiley:

Auro, sorry for my mistake; however for me this works as a detector because I use the $translateProvider logic to first determine the user locales and then apply appropriate language from translations that I’ve got available or a default (fallback) language. Example:

$translateProvider
    // cs: language locales from lang/*.json by static loader
   .useStaticFilesLoader({
   	prefix: 'lang/locale-',
   	suffix: '.json'
    })

    // cs:default language i language for missing translations
        .preferredLanguage('pl') // cs:preferred language
    // cs:language used for missing translation, may be a list of languages: ids separated with comma
	.fallbackLanguage('en') 

    // cs:register my available languages
	.registerAvailableLanguageKeys(['pl', 'en', 'de', 'it', 'es', 'fr', 'pt'], {
	'pl' : 'pl', 'pl_PL': 'pl',
	'en' : 'en', 'en_GB': 'en', 'en_US': 'en', 'en_AU': 'en', 'en_CA': 'en', 'en_IN': 'en', 'en_IE': 'en', 'en_MT': 'en', 'en_NZ': 'en', 'en_PH': 'en', 'en_SG': 'en', 'en_ZA': 'en', 'en_UK': 'en',
	'de' : 'de', 'de_DE': 'de', 'de_CH': 'de', 'de_AT': 'de', 'de_LU': 'de',
	'it' : 'it', 'it_IT': 'it', 'it_CH': 'it',
	'es' : 'es', 'es_ES': 'es', 'es_AR': 'es', 'es_BO': 'es', 'es_CL': 'es', 'es_CO': 'es', 'es_CR': 'es', 'es_DO': 'es', 'es_EC': 'es', 'es_SV': 'es', 'es_GT': 'es', 'es_HN': 'es', 'es_MX': 'es', 'es_NI': 'es', 'es_PA': 'es', 'es_PY': 'es', 'es_PE': 'es', 'es_PR': 'es', 'es_ES': 'es', 'es_US': 'es', 'es_UY': 'es', 'es_VE': 'es',
	'fr' : 'fr', 'fr_BE': 'fr', 'fr_CA': 'fr', 'fr_FR': 'fr', 'fr_LU': 'fr', 'fr_CH': 'fr',
	'pt' : 'pt', 'pt_BR': 'pt', 'pt_PT': 'pt'
        })
    
    // cs: user language detection
	.determinePreferredLanguage()
		
    // cs:remember language in custom storage 
	.useStorage('StorageService');

This logic put in the .config cause that app is started with a translation that is selected from the list of provided (by me) translations that are compatible with the user device/browser locale. On EN device it is automatically English, on French device, French language and so on.

Ah it works nice!
Unfortunately it returns de_de with my device even its set to de_ch :frowning:

just one question: useStorage could you show us how you store this information?
is there a specific interface we have to use?

No magic behind. Just a simple service that uses local storage. Below you’ve got the whole working module :smile:

angular.module('csapp1.services.storageservice', [])


.factory('StorageService', ['$window', function($window) {
  return {
    set: function(key, value) {
      $window.localStorage[key] = value;
    },
    get: function(key, defaultValue) {
      return $window.localStorage[key] || defaultValue;
    },
    setObject: function(key, value) {
      $window.localStorage[key] = angular.toJson(value);
    },
    getObject: function(key) {
      return angular.fromJson($window.localStorage[key]);
    }
  }
}]); // end of StorageService
1 Like