[ionic-mcs-part02] - i18n

Localization

Install angular-translate

$ bower install angular-translate 

$ bower install angular-translate-loader-static-files

Edit www/index.html

add two java script files right after ionic.bundle.js

Edit www/js/app.js

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a  attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.controllers' is found in controllers.js
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();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider, $translateProvider) {
    $translateProvider.useStaticFilesLoader({
      prefix: 'languages/',
      suffix: '.json'
    });
    //$translateProvider.preferredLanguage('ko_KR');
    $translateProvider.determinePreferredLanguage();

  $stateProvider

    .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/menu.html',
    controller: 'AppCtrl'
  })

  .state('app.about', {
    url: '/about',
    views: {
      'menuContent': {
        templateUrl: 'templates/about.html'
      }
    }
  })

  .state('app.preferences', {
      url: '/preferences',
      views: {
        'menuContent': {
          templateUrl: 'templates/preferences.html'
        }
      }
    });
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/about');
});

In the above source code, at the line 7, please notice that 'pascalprecht.translate'  is added. And you should take a close look at from line 25 to 31. At Line 25, don't miss that $translateProvider is injected as a function parameter. In this case, you need some json files to handle multi-languages.

I will add two json files that contain local messages. If you need to support some other languages, you can add

• www/languages/en_US.json
• www/languages/ko_KR.json

Those JSON files look like as follows

www/languages/en_US.json

{
  "MENU_TITLE": "Ionic MCS Utility Sample",
  "MENU_ABOUT": "About",
  "MENU_PREFERENCES": "Preferences",
  "MENU_LOGIN": "Login",
  "MENU_LOGOUT": "Logout"

}

www/languages/ko_KR.json

{
  "MENU_TITLE": "Ionic MCS Utility Sample",
  "MENU_ABOUT": "About",
  "MENU_PREFERENCES": "환경설정",
  "MENU_LOGIN": "로그인",
  "MENU_LOGOUT": "로그아웃"

}

You might not understand Korean labels, but don't worry about it. I believe you can change it into your own language. Anyway now let's apply localised message to our mobile app.

Edit www/templates/menu.html

  
    
      
      

      
        
      
    
    
  

  
    
      
{{ 'MENU_TITLE' | translate }}
    
      
        
          {{ 'MENU_ABOUT' | translate }}
        
        
          {{ 'MENU_LOGIN' | translate }}
        
        
          {{ 'MENU_PREFERENCES' | translate }}
        
        
          {{ 'MENU_LOGOUT' | translate }}
        
      
    
  

You can see {{ 'MENU_TITLE' | translate }} at line number 17 and it means that the value of 'MENU_TITLE' saved in {langKey}.json file in www/languages directory will be shown on the screen of your phone.

Result

Menu Labels when you set the language configuration of your phone as "Korean"

Menu labels when you set the language configuration of your phone as "English"

Resources

Easy global i18n angularJS language translations for your Angular app