navigation

Applying internationalization and localization to AngularJS  application

Applying internationalization and localization to AngularJS application

by
May 9, 2017

As we all know, first impression is very important. It is good user experience to display the text and apply the locale of the application in the user’s own language.

In this blog, we will see how to achieve this by adding few plugins to an existing project.

Prerequisits

We already have a project developed in AngularJS.It contains some of the most common components.

This is how it looks like:

блог1

блог2

How can we customize this application to be displayed in multiple languages and also to show localized dates and number?
Just follow these steps :)

Downloading and configuring plugins

1. First of all download the plugins:

2. Add them in the html:

– The i18n for Angular apps

– Module that creates a loading function for a typical static file url pattern: “lang-en.json”, “lang-de.json”, etc.

– Module that helps dynamically change of locale

 

3. Add a list of dependencies in the main.js, where our main module “App” is defined

4. In the main.js, let’s configure the translateProvider

The translations can be defined in the code but instead are moved to separate files.There are reasons behind this decision – defined in the code makes it hard to use by translators, it is not a good practise.
We use the static file loader to load these files, the response of these urls must be an object of key-value pairs.ex.{ WELCOME_MSG”: “Welcome to our application!”}
The method useSanitizeValueStrategy( strategy ) defines strategy for escaping HTML in the translation, for security reasons.
In the main.js again, let’s configure the tmhDynamicLocaleProvider

This method is used to set the path of the angular locale files in the project. The locale files define the format of the numbers and dates displayed per language.You can download locale files from https://cdnjs.com/libraries/angular-i18n.

Creating language service

1. Let’s create LanguageService, inject some dependencies and define some member variables and methods

Using the language service

1. Let’s add the LanguageService as dependency in the controller and define methods for changing the language

2. And now, we can add buttons for selecting different language In the html

блог3

!NB – Things to be aware of

At this stage of development a problem pops up – the chart does not apply the locale when changing the language.The chart must be forced to redraw.This should happen once the locale is changed.

According to the documentation: “The locale is changed asynchronously. After the locale is changed, the event ‘$localeChangeSuccess’ will be triggered”.That is why  we add the following lines of code:

The array $rootScope.chartsToRedraw   contains the chart itself and is used in case there are more than one chart in the project.

Cookies

Everything works fine so far!

Except that every time you reload the application, the language by default is displayed.

Would it not be better to load the user’s language selected in the previous session?

Let’s use cookies!

1. The cookies module is added in the html:

2. And also injected in the LanguageService

3. That is how we read from and write in the browser cookies.

Detecting browser language

1. And last but not least, for best user experience, if browser cookie is not available, let’s use the browser default language.

You can find the project in this git repository : https://github.com/denitsaoooooo/i18n-app

Do you want more great blogs like this?

Subscribe for Dreamix Blog now!