Click here to Skip to main content
15,354,006 members
Articles / Programming Languages / Javascript
Technical Blog
Posted 8 Apr 2015

Stats

19.4K views
4 bookmarked

Multilanguage AngularJS Apps

Rate me:
Please Sign up or sign in to vote.
3.50/5 (2 votes)
8 Apr 2015CPOL3 min read
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:

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

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

JavaScript
$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.

JavaScript
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:

JavaScript
(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:

JavaScript
(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.

JavaScript
(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:

JavaScript
$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:

JavaScript
$translate.use($routeParams.lang);

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

JavaScript
<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:

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:

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

then our HTML select element will look like this:

JavaScript
<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.

This article was originally posted at http://arian-celina.com/multilanguage-angularjs-apps

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Arian Celina
Architect
Albania Albania
I am a Software Architect, a web developer, and a Computer Science lecturer. I enjoy solving business problems by providing software solutions to them. My favorite technologies and fields of interest include ASP.NET, C# programming language, Java programming language, Javascript, jQuery, AngularJS, Web Services, REST, and mobile application development

Comments and Discussions

 
QuestionMultilanguage AngularJS Apps Pin
Bhavesh Jogani IT23-Aug-17 2:52
MemberBhavesh Jogani IT23-Aug-17 2:52 
QuestionExample file? Pin
Member 1102682624-Jun-15 17:08
MemberMember 1102682624-Jun-15 17:08 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.