Multilanguage AngularJS Apps

For the 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 a 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:

$routeSegmentProvider.when('/:lang/module/...', 'moduleName')

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

$routeParams.lang

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.

var myApp = angular.module('myApp', ['pascalprecht.translate']);

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:

(function(){
	var myApp = angular.module("myApp");
	myApp.labels_en = {
		  "version": "Version",
		  "name": "Name",
		  "surname": "Surname"
	  };
}());

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:

(function(){
	var myApp = angular.module("myApp");
	myApp.config(["$translateProvider", function ($translateProvider) {
		  $translateProvider.translations("en", myApp.labels_en);
		  $translateProvider.preferredLanguage("en");
		}]);	
}());

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

(function(){
	var myApp = angular.module("myApp");
	myApp.labels_sq = {
		  "version": "Verzioni",
		  "name": "Emri",
		  "surname": "Mbiemri"
	  };
}());

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

$translateProvider.translations("sq", myApp.labels_sq);

and the new language is automatically supported.

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

$translate.use($routeParams.lang);

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

<label for="inputId">{{ 'version' | translate }}</label>

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:

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:

$scope.list = {
  "id": 1,
  "name": [
    "en": "name in english",
    "sq": "name in albanian"
  ]
}

then our HTML select element will look like this:

<select 
    data-ng-model="testObject.selectName" 
    name="selectName" 
    ng-options="i.id as name[lang] for i in list" 
    >
</select>

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 you as well.

The post Multilanguage AngularJS apps appeared first on arian-celina.com.