5 Step Guide on Translating your Ionic App to Reach a Global Audience

Request a PDF of this post

An easy way to reach more users with your mobile app is by supporting their native language. Apple strongly encourages preparing your app for a global audience. This tutorial introduces how to translate your Ionic application to support other languages. My recent Hours Worked update (version 3.2) included support for 5 other languages. This tutorial walks through updating an app in 5 simple steps:

  1. Translate the content of your app
  2. Add the Angular Translate module to your app
  3. Update your templates
  4. Update your controllers and services
  5. Test your translations

Translate the content of your app

Before changing any code we need all app content translated. Create a text document of every piece of text from your app. Be sure to check everything. Here are some considerations:

  • Text from each Template
  • Text from each Controller
  • Text from each Service
  • Text returned from a Filter
  • App Store Description
  • App Store keywords

Unless you are multilingual you need to use a translation service to convert text to your preferred language(s). I have used a website called I Can Localize in the past. You can also find affordable translations for sale on Fiverr. I recommend finding a translator with experience translating mobile apps.

Add the Angular Translate module to your app

Assuming you built your app using the Ionic Framework and AngularJS you should use the powerful translation service Angular Translate. Download the latest release from their repo, unzip the file, and move the angular-translate.min.js file to your project js folder. Then simply embed the script into your www/index.html file as follows:

<script src="js/angular-translate.min.js"></script>

Be sure to inject the module as a dependency into your app. Here is an excerpt from Hours Worked:

angular.module('hoursworked', ['pascalprecht.translate'])

Then teach the app about your translations using the $translateProvider. Here is a sample from Hours Worked:

$translateProvider.translations('en', {
  start_label: "Start Time",
  end_label: "End Time"
});

$translateProvider.translations('es', {
  start_label: "Principio",
  end_label: "Fin"
});

$translateProvider.translations('pt', {
  start_label: "Hora de Início",
  end_label: "Hora de Término"
});

$translateProvider.translations('zh', {
  start_label: "开始时间",
  end_label: "时间结束"
});

$translateProvider.preferredLanguage("en");
$translateProvider.fallbackLanguage("en");

Update your templates

Now that your app is aware of the translations you need to remove all plain text from your templates. Take the “Start Time” label from Hours Worked as an example. Here is a snippet of the template before translating the app:

<label class="item item-input">
  <span class="input-label">Start Time</span>
  <input type="time">    
</label>

Here is the same snippet upgraded to use the translation filter:

<label class="item item-input">
  <span class="input-label">{{"start_label" | translate}}</span>
  <input type="time">    
</label>

Update your controllers and services

After updating each template you will need to update any logic that returns text. Below is a sample from the Controller for the Hours Worked calendar using the translate filter. Note that for a filter to work inside of a controller it must be injected as a dependency: .controller('CalendarCtrl', function($filter) {.... After updating the list of dependencies you are free to use the translate filter:

Former Controller logic

DayFactory.index().then(function(hours) {
  $scope.hours = hours;
  if ($scope.allLabel =="View All Hours") {
    $scope.limit = hours.length;
    $scope.allLabel = "View Less";
  } else {
    $scope.limit = 5;
    $scope.allLabel = "View All Hours";
  }

}, function(errors) { console.log(errors); });

Same Controller logic translated

DayFactory.index().then(function(hours) {
  var va1 = $filter('translate')("view_all");
  var va2 = $filter('translate')("view_less");
  $scope.hours = hours;
  if ($scope.allLabel == va1) {
    $scope.limit = hours.length;
    $scope.allLabel = va2;
  } else {
    $scope.limit = 5;
    $scope.allLabel = va1;
  }

}, function(errors) { console.log(errors); });

Test your translations

Testing your translation is simple and dare I say somewhat enjoyable. You will be changing the language and region of your iOS device to test. This is where to find the setting:

  • Settings App
  • General
  • Language & Region
  • iPhone Language
  • Select a language you have provided a translation for

Then you can re-open your app to confirm that content has been converted. Here is a screencast of me testing the Hours Worked translation in Portuguese:

Get this Guide as a PDF

Subscribe to the Apps by John Newsletter to get your PDF. I will send you a PDF of this guide and email announcements of any future guides!