Sunday, 24 January 2016

Post 42: Internationalization ionic app

Create a blank ionic project

Download angular-translate zip-file from here:
https://github.com/angular-translate/bower-angular-translate/releases

Extract and put the angular-translate.min.js file in the following path:
/www/js/angular-translate.min.js

Open www/index.html and add the script tag between bundle.js and app.js
<script src="js/angular-translate.min.js"></script>

Add the plugin:
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-globalization.git

Open /www/js/app.js and insert the following lines:
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ngCordova',  'pascalprecht.translate']) .run(function($ionicPlatform, $translate) {


inside run() inside ready() function add this:

add config:


In index.html you can use it the following way:


2
3
4
5
6
<ion-view title="Example">
    <ion-content>
        <h1>{{"hello_message" | translate}}</h1>
        <h2>{{"goodbye_message" | translate}}</h2>
    </ion-content>
</ion-view>



Credits: https://blog.nraboy.com/2014/08/internationalization-localization-ionicframework-angular-translate/
Tweet