Learn an Easy Way to Create a Multilingual Angularjs App_670

The rise of multilingual user interface has bought an interesting shift in the way complex information is perceived by today’s web users. These days, a variety of web projects demand the use of multilingual graphical interface to cater the needs of an international audience. Creating a unique international application requires you to make use of translated resource strings which ultimately lets you render the data using locale-sensitive objects.

Designing a mobile application interface that supports a great deal of languages can help you make headways to the international market in the quickest possible manner. It also lets you earn a large number of installation base as you provide the user freedom to use your app in a language which is relevant to their choice.

Since English is not enough to stay competitive, one needs to give a thought to multilingual applications to unlock the doors of other cultures. English is a global language, but there are chances that you’ll miss some other opportunities if it is all we follow, especially in a business scenario.

With this in mind, I am going to explain you a process of creating a multilingual mobile app with Angularjs. Angularjs is a cutting-edge amongst all JavaScript frameworks that allows you to create striking mobile apps efficiently.

So, let’s begin.

To begin with, we need to create a language setting function for our interface. There are two types of components wherein this function needs to be added.

  • Labels
  • Dropdown lists

We are provided with a route parameter that allows us define the actual language the user prefers to choose. The route parameter looks something like this:

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

Here, notice the use of :lang parameter that allows us to render the user current language by calling.
$routeParams.lang

Now, we will use an easy to use angular translate. It’s quite simple to set up. All you need is just add angular-translate.js file to your index.html and use a reference of ‘pascalprecht.translate’ function while defining the module. Below is an example showcasing the entire process.

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

Once you are done with this, let’s proceed to create a json file for any language you want to define. For example- for English, it would be like en.js file that also contains some critical components of English language. You can go on to define any language you want like this.

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

Next, it’s time to inform our app about the language translation configuration we are playing around with for quite a while. For this, it is recommended to create an individual configuration file which we can name as translation.js. Also, make sure you reference this file to index.html. Look at the following piece of code to understand the concept better.

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

If you want to add a translation for Albanian language, you need to create a sq.js file which contains all the translation relating stuff.

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

Now, the above code should be added to translation.js file.

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

Congrats! You have successfully created an automatic support for a different language.

Also Check: 5 Free Beginner Friendly Books for Learning Node.js

After this, we need to instruct our controller about the language we wish to use by fetching the param from the route and passing it to the $translate object.

$translate.use($routeParams.lang);

We’ll now add the dynamic labels and messages with the help of angularjs binding and filtering the same using translate.

The above code will help us translate our labels on the basis of route parameter :lang.

As of now we have successfully translated our labels, after this it’s time to translate our dropdown lists. As we already have a list of languages to be offered to our visitors, you can choose to save this list within the database lookup tables. This way every lookup will have a structure just like this:

id name_en name_sq

Now, as soon as we return the json object for the lockup values, we will return an object that looks something like this.

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

After this we will receive an element that looks like this:
code

To Conclude
Hope you’ve gained a pretty good understanding of adding a multilingual function in your angularjs application. It’s a nice way to attract international audience in the manner most effective.

Author Bio: Rick Brown is a veteran iPhone app programmer for Mobiers Ltd – a leading iOS apps development company. In case, you are willing to dig-out more information about the related services, get in touch with him.