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.