i18n Ionic is a full working example of an Internationalized Ionic application. Best practices and proven techniques are packed together so as to implement a real case scenario providing a great example for the internationalization of your app. Speed up your app development process by using it as a point of reference and give your applications the internationalized boost they need.
The app works in a very simple and effective way. i18n Ionic takes account of the language settings of the device and determines which translation files will use. It also takes account of the locale (region) settings of the device and regulates the format of culture/language sensitive information such as dates and time.
Cordova Globalization plugin is utilized in order to undertake operations specific to the user’s locale and language. i18n Ionic comes with a very detailed and easy to follow documentation. Best techniques and practices are implied to guide you.It can be used as a point of reference in order to localize and translate your next PhoneGap or Ionic project.
Features
Cordova Plugin Globalization
The i18n Ionic app makes use of the Cordova Globalization Plugin. This plugin obtains information and performs operations specific to the user’s locale, language, and timezone. Note the difference between locale and language:
- locale controls how numbers, dates, and times are displayed for a region,
- while language determines what language text appears as, independently of locale settings. Often developers use locale to set both settings, but there is no reason a user couldn’t set her language to “English” but locale to “French”, so that text is displayed in English but dates, times, etc., are displayed as they are in France.
Plain text translations
Translating plain text can be so easy and fast! i18n Ionic application uses translation keys instead of strings so that, by using the same keys, multiple languages can be supported. Therefore, using the same HTML view you will find it super easy to display the same text in as many languages as you prefer by creating the corresponding JSON file for every language.
Date/Time Display Format
An internationalized app respects all user settings and takes the appropriate actions to display information accordingly. i18n Ionic app displays Date and Time according to the device language and locale (regional) settings. A full set of different date and time formats, according to the guidelines of AngularJS (https://docs.angularjs.org/api/ng/filter/date) are already implemented and available to be used.
Input form
A full example of an input form consisting of drop-downs, text controls, labels and buttons is implemented. Get inspired or use it as it is and adjust any input form according to your special needs.
Text structure
All the string values are externalized and collected into JSON files. Thus, you are able to add as many languages as you want by simply adding a JSON file with the respective translated text in a particular language. Each label, title or even body text, is assigned to a key so you only need to modify the text that corresponds to the related keys.
Documentation / Internationalisation Guide
The i18n Ionic app comes with a comprehensive documentation which explains everything you need to know about how Internationalization, and the application, works. Examples on how to configure an application and add an additional language are also included. The localization of your next PhoneGap or Ionic project can be easily done just by following this guide.