By special request, a tutorial on supporting multiple languages in an Ionic app.
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
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
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
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
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