Follow the steps here:
- Download the Source Code.zip file from here and copy the angular-translate and angular-translate.min file to www/lib/ionic/js/angular folder along with other js files.
- In index.html, include "http://lib/ionic/js/angular/angular-translate.js"
along with other script tags.
- Now you need to add 'pascalprecht.translate' in dependency list of controllers.js file like,
angular.module('starter.controllers', ['pascalprecht.translate']). You can also add it in dependency list of main module.
Create a sub-folder, for example, 'lang' within www and add js files for each language you want to add to your application. Within individual JavaScript files, create an array variable containing key-value mapping of all translations. For example, in english.js file:
var translations_en = {
Title:'My app title',
Settings:'Settings'
}
In bengali.js file:
var translations_bng={
Title:'অ্যাপের নাম',
Settings: 'সেটিংস'
}
Note here, the key names will be same in all files but values will be different. In your HTML, you will access the value through the key. Similarly, you can add multiple language in multiple files.
Now, in your app.js, add the following code.If you already have some other .config functions in your app.js, No worries! You can have more than one .config functions. Add this separately, better.
.config(function($translateProvider) {
$translateProvider.translations('en', translations_en);
$translateProvider.translations('bng', translations_bng);
$translateProvider.preferredLanguage('en');
}
You can show values like this, {{'Title'|translate}}. Depending on the preferredLanguage given, in place of 'Title', appropriate value declared in js file of 'lang' folder will be shown here.
For more details, visit this blogpost
