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.