Internationalization with AngularJS
Why is internationalization support so important?
These days variety of web projects demand the support for multiple languages feature. Most of the internet users do not have English as their first language. Thus there is a need to reach those users as well. There are many modules available to achieve multilingual feature in AngularJs like angular-gettext, angular-translate. We’ll cover the basics of angular-translate, configurations with some examples.
What is angular-translate?
It is a module which helps to implement internationalization features in AngularJs. It provides us with components like filters, directives, and functions to load i18n data asynchronously. It uses JSON format messages to achieve ease of implementation.
Configuration
You can use bower to install ‘angular-translate’ and ‘angular’.
[code lang=”html”]
bower install angular
bower install angular-translate
[/code]
Here is the CDN link for angular and angular-translate:
[code lang=”javascript”]
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js
https://cdnjs.cloudflare.com/ajax/libs/bower-angular-translate/2.7.1/angular-translate.min.js
[/code]
Setting up your page
When setting up your page, you have to include angular.js and angular-translate.js file (index.html).
[code lang=”html”]<div>
<h3> Hello</h3>
<p>This is a demo app for multilingual support.</p>
<label>Click here for switching language between spanish to english </label>
<button> Change</button>
</div>
[/code]
Adding dependency in your app
Inject ‘pascalprecht.translate’ module in your app:
var MultilingualApp = angular.module('MultilingualApp', ['pascalprecht.translate']);
Configure $translateProvider in your app
[code lang=”javascript”]
MultilingualApp.config(function ($translateProvider) {
$translateProvider.translations(‘US_EN’, {
‘GREETING’: ‘Hello !’,
‘DESCRIPTION’: ‘This is a demo app for multilingual support.’,
‘LBL_SWITCH’:’Click here for switching language between spanish to english’,
‘CLICK’: ‘Click’
});
$translateProvider.translations(‘SPANISH’, {
‘GREETING’: ‘Hola !’,
‘DESCRIPTION’: ‘Esta es una aplicación de demostración para soporte multilingüe.’,
‘LBL_SWITCH’: ‘Haga clic aquí para cambiar el idioma entre español al Inglés’,
‘CLICK’: ‘Clic’
});
//It sets default language for your app
$translateProvider.preferredLanguage(‘US_EN’);
});
[/code]
Add dependency in your controller
In your controller inject ‘$translate’ service.
[code lang=”javascript”]
MultilingualApp.controller(‘MyCtrl’, function ($scope, $translate) {
$scope.changeLanguage = function () {
var language = $translate.use();
if (language === ‘US_EN’) {
$translate.use(‘SPANISH’);
} else {
$translate.use(‘US_EN’);
}
};
});
[/code]
$translate.use() : When it is called without parameter it is treated as getter function. It will return current key (language). If you pass parameter then it is acted like setter function and it will reset the language.
Your angular application should resemble to following piece of code:
[code lang=”javascript”]
var MultilingualApp = angular.module("MultilingualApp", ["pascalprecht.translate"]);
MultilingualApp.config(function ($translateProvider) {
$translateProvider.translations("US_EN", {
"GREETING": "Hello !",
"DESCRIPTION": "This is a demo app for multilingual support.",
"LBL_SWITCH": "Click here for switching language between spanish to english",
"CLICK": "Click"
});
$translateProvider.translations("SPANISH", {
"GREETING": "Hola !",
"DESCRIPTION": "Esta es una aplicacion de demostracion para soporte multilingue",
"LBL_SWITCH": "Haga clic aquí para cambiar el idioma entre espanol al Ingles",
"CLICK": "Click"
});
$translateProvider.preferredLanguage("US_EN");
});
MultilingualApp.controller("MyCtrl", function ($scope, $translate) {
$scope.changeLanguage = function () {
var language = $translate.use();
if (language === "US_EN") {
$translate.use("SPANISH");
} else {
$translate.use("US_EN");
}
};
});
[/code]
Update view
There are three ways to update your view to enable internationalization.
- Using Filter
- Using Directive
- Using Service
Using Filter:
Update your view file using ‘translate’ filter. It will convert your static text into i18n messages.
[code lang=”html”]
<h3>{{‘GREETING’|translate}} </h3>
will converted into
<h3> Hello</h3>
[/code]
Using Directive:
[code lang=”html”]
<h3> <pre translate="GREETING"></pre></h3>
will translated into
<h3> Hello</h3>
[/code]
Using Service:
If you are using service to convert your static text into i18n messages. Then first you have to inject $translate service into your controller.
[code lang=”javascript”]
MultilingualApp.controller("MyCtrl", function ($scope, $translate) {
$translate(‘GREETING’).then(function (translation) {
$scope.greetingText = translation;
});
});
[/code]
View should be look like this:
[code lang=”html”]
<div ng-controller="MyCtrl"> <h3>{{greetingText}}</h3> </div>
[/code]
Here I have used filter for enabling view for internationalization which is mostly used.
[code lang=”html”]
<html>
<body>
<script src="angular.min.js"></script>
<script src="angular-translate.min.js"></script>
<script src="app.js"></script>
<div ng-app=’MultilingualApp’>
<div ng-controller=’MyCtrl’>
<h3>{{‘GREETING’|translate}}</h3>
<p>{{‘DESCRIPTION’|translate}}</p>
<label>{{‘LBL_SWITCH’|translate}} </label>
<button ng-click=’changeLanguage()’> {{‘CLICK’|translate}}</button>
</div>
</div>
</body>
</html>
[/code]
You can try it out yourself on JSFiddle multilingualDemoApp.
To learn more about angular-translate visit angular-translate.
Read Further on AngularJS Series
- AngularJS : A “Write Less Do More” JavaScript Framework
- AngularJS : Updating a Label Dynamically with User Input
- AngularJS : Adding Items to a JavaScript List and updating corresponding DOM Dynamically
- AngularJS : Text Suggestions
- AngularJS : Sorting objects on various attributes
- AngularJS : Fetching data from the server
- AngularJS : Multiple Views, Layout Template and Routing
- AngularJS : Implementing Routes And Multiple Views
- Building Intuitive Frontend Interfaces with AngularJS
