How to Localize Your Ionic Project

How to localize, translate and support multiple languages in your Ionic / AngularJS project:

1. Install Angular Translate:

npm install angular-translate
npm install angular-translate-loader-static-files

2. In your index.html make sure you include the js files:

<!-- translations -->
<script src="js/angular-translate.js"></script>
<script src="js/angular-translate-static-files.js"></script>

If you cannot find these js files in your project folder then you can find them on the project github pages.

3. In your app.js add the translation loading

angular.module('starter', ['ionic', 'starter.controllers', 'pascalprecht.translate'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
      return StatusBar.hide();
    }
  });
})

.config(['$translateProvider', function ($translateProvider) {
  $translateProvider.useSanitizeValueStrategy('sanitize');

  $translateProvider.useStaticFilesLoader({
      prefix: 'locale/locale-',
      suffix: '.json'
  });

  $translateProvider.preferredLanguage('en');
}])

4. Create a locale json file

Create a file named locale-en.json and a locale folder
the file should be in your www/locale/locale-en.json
Do not include any //comments in the JSON file

{
  "HelloWorld": "Hello World!",
  "Name": "My Name"
}

5. Add localization in your html file

<label>{{ 'HelloWorld' | translate }}</label>

6. Translating within your javascript

Make sure you import $translate within your controller before using it.

 $translate('HelloWorld').then( function (translation){
    console.log(translation);
  });

Or if you need to translate multiple terms:

 $translate(['HelloWorld', 'Goodbye']).then( function (translations){
    console.log(translations.HelloWorld);
    console.log(translations.Goodbye);
  });

For more information visit https://angular-translate.github.io/docs/#/guide.