Search code examples
angularjscordovaionic-frameworkcordova-pluginsmultilingual

Multi-language Content in Cordova

I just started helping out on a cross-platform mobile app built with cordova & ionic. I'm looking for a way to provide content, i.e. stuff like menu labels, category names, etc. in multiple languages. Of course I could simple put all of them into some js variables and dynamically set them, but I was wondering is there is a more elegant solution.

Sorry if there is some obvious answer, when I searched for it I only found platform (e.g. android) specific answers, but obviously this should be a generic approach.

Cheers & Thanks!

Solution

  • To use multiple languages on cordova, you should have searched in AngularJS ! There is a function called "Translate", which is used like a filter in your HTML and as a function in your JS. Here is the documentation : https://angular-translate.github.io/docs/#/guide Basically, you have this for example : 

    navigator.globalization.getPreferredLanguage(function (language) {
var applanguage = (language.value).split("-")[0];
            switch (applanguage) {
                case 'fr':
                    appLanguage = 'fr';
                    break;
                case 'de':
                    appLanguage = 'de';
                    break;
                case 'en':
                    appLanguage = 'en';
                    break;
                default:
                    appLanguage = 'fr';
                    break;
            }
        });

    this is for finding the device's language, but then you have to put a translation.js file in your config folder.

    Here is an example file :

    yourApp.config(['$translateProvider', function($translateProvider){
$translateProvider.translations('en', {
    my_string1: 'Hello',
    my_string2: 'Goodbye',
});
$translateProvider.translations('fr', {
    my_string1: 'Bonjour',
    my_string2: 'Au revoir',
});

    Finally, here is how you apply it

    In HTML :

    <p>{{my_string1 | translate}}</p>

    In JS : 

    $translate.instant("no_internet");

    Good luck, and read the doc if you haven't understood everything i said !