Internationalization of an Ionic App: Multilanguage Support

posted in: Uncategorized | 10

@KlopperTopper on twitter wants to know about multilanguage support in an Ionic app.

Living in a world that is more connected globally than it ever has been, releasing an app with support for multiple languages (Internationalization) can really boost your app and expand its audience. In this article I’ll talk about using angular-translate in your Ionic app, with simple examples, as well as talk about how you may want to actually use the techniques in practice. My starting point is going to be Ionic’s Sidemenu example on Codepen.

Angular Translate

Angular Translate is …”an AngularJS module that makes your life much easier when it comes to i18n and l10n including lazy loading and pluralization.” It allows you to define multiple languages for your app and provide translations for each language.

Simple Example

From the Angular Translate Github page, we can get an already good example of how this service works. Our most basic example is using the translate attribute to change the content inside an element.

<h2 translate="TITLE">Hello</h2>

The value of the translate attribute, TITLE, is a unique identifier of a string. Let’s look at the javascript.

var app = angular.module('at', ['pascalprecht.translate']);
app.config(function ($translateProvider) {
  $translateProvider.translations('en', {
    TITLE: 'Hello'
  });
  $translateProvider.translations('de', {
    TITLE: 'Hallo'
  });
  $translateProvider.preferredLanguage('en');
});

Here, in our app’s config, provide two sets of translations to the $translateProvider module: English and German. We also specify that the default language is english. You’ll notice our TITLE id is present in both translations with the text that it should be in that language.

We can also use the translation in an element’s attribute.

<input type="text" name="q" placeholder="{{ 'TRANSLATION_ID' | translate }}" />

… where TRANSLATION_ID is the ID of the translation, like our TITLE id in the previous example.

Now, how do we change the language? Well, we will need a couple of buttons.

<button class="button button-clear" ng-click="ChangeLanguage('en')">EN</button>
<button class="button button-clear" ng-click="ChangeLanguage('de')">DE</button>

Here we have two buttons that call the ChangeLanguage function on click, passing in a language identifier. Let’s look at that function.

.controller('MainCtrl', function($scope, $ionicSideMenuDelegate, $translate) {
	
	$scope.ChangeLanguage = function(lang){
		$translate.use(lang);
	}

});

Here we call $translate.use and pass in one of the language codes that we configured in the .config of our app. The app will switch to that translation.

Separating Translations

Chances are, we won’t want to have all of our translations in our config file, but instead in a separate external file. Let’s assume we have a .js file with the translations in as follows:

var translations = {
	"en": {
		"hp1": "Swipe to the right to reveal the left menu.",
		"hp2": "(On desktop click and drag from left to right)",
		"ht": "Welcome"
	},
	"de": {
		"hp1": "Streichen Sie nach rechts, um die linke Menü offenbaren.",
		"hp2": "(Auf dem Desktop klicken und ziehen Sie von links nach rechts)",
		"ht": "willkommen"
	}
}

Here we have our English and German, and 3 translations. (NOTE: I don’t speak German. These are products of Google Translate, so if they are incorrect, please feel free to correct me in the comments.)

If we pull in these translations before our app.js file, we can load them into the provider as follows:

.config(function($stateProvider, $urlRouterProvider, $translateProvider) {
  
	for(lang in translations){
		$translateProvider.translations(lang, translations[lang]);
	}

	$translateProvider.preferredLanguage('en');
}

Here, we loop through each translation and provide it to the provider. Pretty simple. In practice, we would probably want the translations in some other file (JSON perhaps?) and load them in with $http. Also note with Phonegap Build, it looks for a folder called “locales” with subfolders (ex: locales/en) for each language your app supports, so it might be a good idea to put your translations in those folders.

EDIT: Turns out, Angular translate has a way of doing this with external JSON files using $translateProvider.useStaticFilesLoader. See this Plunker for an example.

Sidemenu Example

Using the sidemenu codepen as a starting point, let’s look at what is involved with making an existing Ionic app support multiple languages.

Given the home view:

<ion-view title="Welcome">
	<ion-content padding="true">
	  <p>Swipe to the right to reveal the left menu.</p>
	  <p>(On desktop click and drag from left to right)</p>
	</ion-content>
  </ion-view>

… we will want to translate the title of the page, and both paragraphs. Let’s do that using the techniques above:

<ion-view title="{{ 'ht' | translate }}">
	<ion-content padding="true">
	  <p translate="hp1">Swipe to the right to reveal the left menu.</p>
	  <p translate="hp2">(On desktop click and drag from left to right)</p>
	</ion-content>
  </ion-view>

We will also want to add our language buttons to the header: (They can go anywhere.)

<ion-nav-buttons side="right">
	<button class="button button-clear" ng-click="ChangeLanguage('en')">EN</button>
	<button class="button button-clear" ng-click="ChangeLanguage('de')">DE</button>
</ion-nav-buttons>

And using the javascript from above to pull in thr translations into the .config file, we have our finished, multilanguage view.

Finished Example: http://codepen.io/andrewmcgivery/pen/tqymb

For the sake of this post, I only did part of the app, but these techniques could be used on the rest of the app as well.

Conclusion

Angular-translate is a great way to take your app to the next level with support for multiple languages. It will take a bit of work, but the good news is you won’t have to worry about the technical aspects of language switching.

My name is Andrew McGivery. I currently work full time as an application developer at Manulife Financial in Canada.

10 Responses

  1. Great article! Thank you for the write-up!

  2. I use gettext, it is similar but it uses gettext format so you can use poedit tools and translations are better separated. http://angular-gettext.rocketeer.be/

  3. Very good article , Thanks

  4. Good Article Andrew, Thx,
    What about the internationalization of the application name ?

    • Hello Alex,

      Different translations of the app’s name is done through the App Store/Google Play.

      • I am talking about the name which appears under the menu’s icon (currently configured by in config.xml)

        • Not sure if it still matters, but for others looking for the same thing:

          If you want to translate your app name, go to the ‘platforms/android/res’ folder. There should be a folder called ‘values’ containing a file called strings.xml. Copy the xml file, create a new folder values-{localication_code} (for example, dutch would be ‘values-nl’) in the ‘res’ folder and paste the strings.xml in the new folder. Translate the string called ‘app_name’ and it will be changed according to the users device language.

          Note that this is the default way to localize in android. I don’t know how to do this in iOS, but it should work the same.

  5. sheik subhani

    thank Andrew McGivery but i want to add css according to language (example Arabic alignment of the content is right etc )

  6. You don’t mention where to get them (command )

Leave a Reply