Explain Angularjs or I18n Angular internalization

The web applications require several languages to run. You can divide the process of creating a piece of software in this multiple language support into two parts.

• Get it technically ready to support several languages.
• Regions and get it ready for a specific language or region.

In this article let us discuss about Angularjs multi language support by Angularjs internalization or i18n angular. First let us see about Internalization.

To get in-Depth knowledge on Angularjs you can enroll for a live demo on Angular Online Training.

Internationalization:
Adapting a product to match common time or currency or data patterns. You can write internationalization in short form i18n. It signifies the number of letters between I and N in the English alphabets.

AngularJS i18 support:

There’s date or time, numbers and currency formatting. There is also support for pluralization. But two significant limitations do exist. Firstly, the method of converting a label or key to an actual text for a given language which in my view is an i18n angular feature which is more fundamental than formatting dates and numbers is not supported out of the box. Second, when the page is initialized, the language to be used for date or time and number formatting must be chosen, and can not be dynamically modified. Overall you might say that AngularJS has very restricted support for i18n angular.

Looking at AngularJS extensions of third party i18n angular, one easily stumbles over angular-translate. The basic concept of using a filter to perform i18n angular. Besides it also implements i18n Angular translation. You may use it for a real-world application and it fits well in general. However, the issue you may face is caused by the fact that i18n angular specifications and technical information differ greatly between applications.

Angular translate:

Angular-translate is rather configurable and modular in its treatment of this variety. The effect is that I often find myself having to implement some angular-translate feature in a customized manner to get it to do what I need it to do and that’s a bit tricky.

In certain instances, coding only what you really need, directly in i18n Angular, can be much easier. This is the approach taken in our project example which you will address below.

Take your career to new heights of success with Angular Training

Angularjs or i18n angular internationalization:

The first thing that you want to accomplish is to have language-agnostic labels translated through a filter into a language-specific text. You want to write in our HTML form something like:

{{ 'FIRST NAME' | xlat}}

The simple task you need to do is to enforce the xlat filter. This may be a very rough implementation.

formApp.filter('xlat', ['$rootScope', function($rootScope){
/ You can also execute code during initialization.
You must return several times the actual filter function which is executed  /.
var tables ={
'en': { 'FIRST NAME': 'First name:' },
'nl': { 'FIRST NAME': 'Voornaam:' }
};
$rootScope.currentLanguage = 'en';
return function(label) {
/ tables is a nested map; first select
/ current language (kept as a
/ global variable in the $rootScope), and then select the label,
/ you get the appropriate key value.
Return tables[$rootScope.currentLanguage][label];
};
}]);

Here, the translation table is hard-coded to the list. To keep track of the selected language, you’re building a $rootScope variable (which is like a “world” variable). And that filter forms part of the same AngularJS module as our own type. But as far as the software architecture goes there is scope for development. But the principle of basics works well. You can’t use this filter just in {{… }} context, but also in other places where AngularJS expressions occur, for example in the ng-options attribute of a selected input.

{{ 'FAV COLOR' | xlat}}

Improving the i18n angular architecture is a common concern among many parts of our application. It is best placed in a separate module, in a JavaScript file of its own. The i18n angular actual logic can be put into a service factory at AngularJS. You can insert this service into the filter and controllers for users to change the current language as a dependency. The initial translation tables are retrievable from a separate file maybe dynamically generated by the server. The new module xlat.js looks like this.

var xlat = angular.module('xlat,]);
'[
xlat.factory('xlatService', function) ({
9var currentLanguage = 'en';
/ you copy to our scope the initial translation table which you have placed
/ in a separate file. (As may adjust
/ this dynamically, making a deep copy
/ instead of simply referring to it is a good practice.)
var tables = $.extend(true,}, {initialXlatTables);
/ You return the service object that is inserted into
/ both your filter and application module.
return {
setCurrentLanguage: function(newCurrentLanguage) {
currentLanguage = newCurrentLanguage;
},
getCurrentLanguage: function) ({
return currentLanguage;
},
xlat: function(label, parameters)
{
return tables[currentLanguage][label];
}
};
});
xlat.filter('xlat', ['xlatService', function(xlatService) {
return function(label) {
return xlatService.xlat(label);
};
}]);
and you change your form.js module as follows:
formApp.controller('FormController',
/ xlatService is inserted into our controller.
['$scope', ..., 'xlatService',
function($s)
$scope.setCurrentLanguage = function(language)
{ xlatService.setCurrentLanguage(language); };

Now everything is neatly factored out and our other modules and controllers are not messed up by the xlat features.

Adding feature: Interpolation

AngularJS interpolation itself has interpolation as one of its core functions. Used for converting AngularJS expressions into {{… }} To write. Fortunately, AngularJS as the $interpolate module provides this feature to the programmer. In a certain context, our AngularJS, client-side alternative to Java’s MessageFormat, will be $interpolate. But how do you get our filter function to have the parameters? Filters from i18n Angular endorse filter arguments, to be presented following the filter name after a colon.

Consider the label as an example.

' 'Age cannot be higher than {years}}.'

When the server receives an AGE MAX message, the value of the years parameter will be returned as well. You’re going to make sure that the server returns a JSON message list like this. You may find this surprisingly easy after building. Apart from cabling the filter syntax together with the existing $interpolate operation, not much is happening here.

xlat.factory('xlatService', ['$interpolate', function($interpolate) {
return {
xlat: function(label, parameters) {
if(parameters == null || $.isEmptyObject(parameters)) {
// You need not worry about parameters. There are none
// interpolation.
return tables[currentLanguage][label];
} else
// $interpolate service, this command return function
return $interpolate(
tables[currentLanguage][label])(
parameters);
}
}
};
}]);

Adding functionality: Pluralization

Pluralization is a very complicated subject if you think about it. The messageformat.js project’s readme gives a nice understanding of the complexity involved. I wanted to do something that was strong enough to handle most cases, but easy enough to be implemented in just a few lines of code.

'INCORRECT_FIELDS': function(parameters) {
if(parameters.n == 1) return 'INCORRECT_FIELDS_SINGULAR';
else return 'INCORRECT_FIELDS_PLURAL';
},
'INCORRECT_FIELDS_SINGULAR': '1 input field was incorrect.',
'INCORRECT_FIELDS_PLURAL': '{{n}} input fields were incorrect.'

The solution is that the meaning for a particular label found in a translation table may be a function, not a document. If it is a function, evaluate this function against the parameters by the xlat algorithm. You can view the outcome like a new label. This makes it incredibly simple to combine the power of AngularJS and that of JavaScript as a dynamic language supporting function values.

Conclusion:

Since it’s so simple, and this area often has a lot of application-specific information, you could usually prefer to create it yourself instead of using a pre-existing framework. You can know more about AngularJS internationalization from industry experts from AngularJS online training.