Internationalization and localization In Angular Js
A problem that you will surely be facing at one time or another is the translation of your application into different languages. We often talk about i18n (internationalization) or l10n (localization), and even if there is a nuance, we often use the two words interchangeably.
i18n and l10n in AngularJS
AngularJS supports the i18n / l10n base for dates, numbers, and currencies as filters. That is to say that according to the selected language, one will have a different formatting.
A date, a number, a price, in French:
- dimanche 27 avril 2014
- 10 000
- 5 000,00 €
The same information in English:
- Sunday, April 27, 2014
- 10,000
- $ 5,000.00
It's a good start, but if you really want to translate your application into another language, it will not be enough.
The solution is to use a module such as angular-translate .
Example of use of angular-translate
index.html
<! DOCTYPE html>
<html lang = "in" ng-app = "myApp">
<Head>
<meta charset = "UTF-8" />
<Title> angular-translational </ title>
</ Head>
<body ng-controller = "MainCtrl">
<a href="#" ng-click="changeLanguage('en')"> {{'BUTTON_LANG_EN' | }} translate </a>
|
<a href="#" ng-click="changeLanguage('fr')"> {{'BUTTON_LANG_EN' | }} translate </a>
<hr />
<p> {{'TITLE' | translate}} </ p>
<p> {{'WELCOME_MESSAGE1' | translate: { "name": "Gilles"} '}} </ p>
<p> {{'WELCOME_MESSAGE2' | translate: userData}} </ p>
<script src = "https://code.angularjs.org/1.2.9/angular.min.js"> </ script>
<script src = "angular-translate.min.js"> </ script>
<script src = "app.js"> </ script>
</ Body>
</ Html>
app.js
var app = angular.module ('myApp', ['pascalprecht.translate']);
app.config (function ($ translateProvider) {
$ translateProvider.translations ('en', {
TITLE: 'Hello.',
WELCOME_MESSAGE1: 'My name is {{name}}',
WELCOME_MESSAGE2: 'And my name is {{name}}. I \ 'm {{age}} years old',
BUTTON_LANG_EN: 'english',
BUTTON_LANG_FR: 'french'
});
$ translateProvider.translations ('en', {
TITLE: 'Hello,'
WELCOME_MESSAGE1: 'My name is {{name}}',
WELCOME_MESSAGE2: 'And my name is {{name}}. I am {{age}} years old,
BUTTON_LANG_EN: 'English',
BUTTON_LANG_FR: 'french'
});
$ TranslateProvider.preferredLanguage ( 'en');
});
app.controller ('MainCtrl', function ($ scope, $ translate) {
$ scope.changeLanguage = function (key) {
$ Translate.use (key);
};
$ scope.userData = {
name: 'Xavier',
age: 25
}
});
Explanation of the code
As a reminder, the declaration of your application (which is nothing more than a module) is done as follows. The first parameter is the name of your application / module, the second is an array containing the modules used ('pascalprecht.translate' corresponds to angular-translate).
var app = angular.module ('myApp', ['pascalprecht.translate']);
The configuration of the application is done in a function, and as for controllers, services and others, we can inject dependencies:
app.config (function ($ translateProvider) {
});
We define translations for a first language (note that this is a javascript object):
$ translateProvider.translations ('en', {
TITLE: 'Hello',
WELCOME_MESSAGE1: 'My name is {{name}}',
WELCOME_MESSAGE2: 'And my name is {{name}}. I \ 'm {{age}} years old',
BUTTON_LANG_EN: 'english',
BUTTON_LANG_FR: 'french'
});
Then for a second:
$ translateProvider.translations ('en', {
TITLE: 'Hello,'
WELCOME_MESSAGE1: 'My name is {{name}}',
WELCOME_MESSAGE2: 'And my name is {{name}}. I am {{age}} years old,
BUTTON_LANG_EN: 'English',
BUTTON_LANG_FR: 'french'
});
We choose a default language:
$ TranslateProvider.preferredLanguage ( 'en');
That we can change on the fly anytime:
$ scope.changeLanguage = function (key) {
$ Translate.use (key);
};
On the template side, we specify the key using either a filter or a directive (according to your preferences):
<! - As a filter ->
<p> {{'TITLE' | translate}} </ p>
<! - or directive ->
<p translate = "TITLE"> </ p>
The text can also contain variables. For that we pass a javascript object directly from the template:
<! - An object passed as a string (which will be parsed by Angular) ->
<p> {{'WELCOME_MESSAGE1' | translate: { "name": "Gilles"} '}} </ p>
<! - A scope object ->
<p> {{'WELCOME_MESSAGE2' | translate: userData}} </ p>
The properties of the object are accessible in the translations, as follows:
WELCOME_MESSAGE1: 'My name is {{name}}',
WELCOME_MESSAGE2: 'And my name is {{name}}. I am {{age}} years old '
Conclusion
This example was relatively simple, but know that it is also possible to:
- Configure the translation module other than in config (services, controllers ...)
- Load data via an AJAX request
- Group the translations by "namespace". Remember, texts are stored in a javascript object, so you can create a tree with as many levels as you want.
Source:- angular-js.fr/traduire-votre-application-an..
Also Read Latest Interview questions on Angular 1 , 2 , 4 From below links
onlineinterviewquestions.com/angular-js-int..