Multilanguage AngularJS apps

Last two years, almost every project that I have worked on, has had the requirement of multilingual graphical user interface (GUI) and messages. This scenario may be important if your country has a multilingual environment or if you are opening to international markets and want to give your users the best possible user experience. The former is little easier as the number of supported languages is usually lower than the latter.

So, what is the problem definition here. We need to support dynamic language setting in GUI for two types of components:

  1. Labels
  2. Dropdown lists

In order to define the actual language the user is using, we chose to use a route parameter for it. Our route became something like this:

Route parameter :lang enabled us to get the user’s current language by calling

Then, we used angular library angular-translate which happened to be very convenient and easy to use for us. The setup is pretty easy. You include angular-translate.js file in your index.html and require reference to ‘pascalprecht.translate’ when defining your module, e.g.

After this, we create a json file for every language we wanted to define, eg. en.js file will contain the labels for English language (sq.js for Albanian, and so on), and it looks like this:

We also need to tell our app the translation configuration. I like to do this in a separate configuration file which I call translation.js (don’t forget to reference it in index.html) and it looks like this:

If later I want to add a translation for Albanian language, I will create one file sq.js which contain the translations e.g.

and I will add this line of code to the translation.js file

and the new language is automatically supported.

Now, in the controller that we want to use translation, we need to to tell the language to be used and we do it like by getting the param from route and pass it to $translate object:

In the view, we put the dynamic labels and messages by using an angularjs binding and filtering it with translate

Here we are, our labels will be translated automatically based on the route parameter :lang.

The labels are translated, now we need to translate the dropdown lists. To support list translation, as we already had a small number of languages to be supported, we chose to save list values in the database lookup tables in all languages, so basically, every lookup table has a structure similar to this:

id name_en name_sq

and when we return the json object for the lookup values, we return an object similar to the object below and bind it in our controller to a scope variable list

then our html select element will look like this

In this way, our ng-options will get automatically the language from lang parameter set in $scope from the $routeParams and it will automatically get the lookup name for the specific language

This might not be the best way to implement multilanguage angularjs apps but it worked pretty well in our case and in several other projects I have worked on.

Hope it helps to you as well.

4 Comments Multilanguage AngularJS apps

  1. leob

    By the way, a small tip – instead of coding:

    {{ ‘version’ | translate }}

    you can do it like this:

    version

    This will be faster because it’s not using Angular 2-way binding.

    (you could also use something like {{::version}} with one-time binding but the syntax with ‘translate’ is simpler)

    You can also substitute values with this syntax:

    And you can even translate attributes in this way:

    Here you have the HTML5 placeholder attribute of the input field translated by angular-translate.

    Reply
  2. leob

    Still no luck, sigh.

    Probably this forum software has a way to allow inserting code that I don’t know of.

    Well anyway you get the idea:

    Instead of {{…}} you can use angular-translate attributes to translate texts, substitute values, and translate attribute values.

    Reply

Leave A Comment

Your email address will not be published. Required fields are marked *