Perform Internationalization And Localization With Angular Translate
Posted By : S. Ajit | 14-May-2016
Angular translate is easy to learn and easier to embed in your application.Angular-translate provide asynchronous translate i.e without reloading the webpage . Let us learn how to implement Angular-translate for your application by following the below steps:-
1.Create JSON file
we can write our translations directly into angular config module like this:-
app.config(['$translateProvider', function ($translateProvider) {
$translateProvider.translations('en', {
'TITLE': 'Hello',
'FOO': 'This is a paragraph'
});
$translateProvider.translations('de', {
'TITLE': 'Hallo',
'FOO': 'Dies ist ein Absatz'
});
$translateProvider.preferredLanguage('en');
}]);
but assume that there are 500 english words in our web application then we have to write these 500 words and its translation for english and for other languages that we want to translate. this will make our code more lengthy and complex to read.
Inorder to seperate our translation from angular we can create a json file which will have all our translation for different languges.
We have to create json file for default language say english and for target languages.
Start with creating a file for english language for example:
{
"Time":"Time",
"Day":"Day"
}
After creating this file save the file as " en.json " and assuming that the content of json is more than 100+ lines then use this website to translate into target languages:
first create an id in this website after that create a sample project on this website and then upload this json on this website and then choose the language do you want to translate and translate one by one and save the translation then download the translated json file assuming that you have translated in french rename the downloaded file to " fr.json ".
After translating the above json into french language will look like this:-
{
"Time":"Temps",
"Day":"journée"
}
2.Download
Install angular translate and angular-translate-loader-static-files module
Via Bower:
bower install angular-translate
bower install angular-translate-loader-static-files
Via npm:
npm install angular-translate
npm install angular-translate-loader-static-files
3.Embed it in your HTML document
Add script file to your HTML file
<script src="angular-translate.js"></script>
<script src="angular-translate-loader-static-files.js"></script>
4.Inject angular-translate module as a dependency into your app
Inject dependecy in angular module
var app = angular.module('myApp', ['pascalprecht.translate']);
5.Configure your app
Assuming that your translated json files are at language folder of your web application
app.config(['$translateProvider', function ($translateProvider) {
$translateProvider.useStaticFilesLoader({
prefix: 'language/',
suffix: '.json'
});
$translateProvider.preferredLanguage('en'); --denote file name en.json
}]);
6.Translate your app
If you want to translate with in HTML file provide the json key in html tag like this:-
<h3> {{ 'Time' | translate }} </h3>
<h3> {{ 'Day' | translate }} </h3>
If you want to translate text into your controller :-
$filter('translate')('Time')
7.Apply translation
By default the keys will be translated to english because we have set " $translateProvider.preferredLanguage('en') " this will fetch translation from en.json file and if we want to change translation then we have to use -
$translate.use(lang)
to translate it into french as we have create fr.json file ( in step 1) use-
$translate.use('fr') -fr denote file fr.json
this will fetch translation from fr.json
if we refresh the page the translation will by default translated to english to fix this issue save langauge(fr or any language) to local storage and fetch the language from local storage:
To save in local storage use :
localStorage.setItem('lang','fr')
And to get language from localstorage use:
$translate.use(localStorage.getItem('lang'))
THANKS
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
S. Ajit
Ajit is a software developer who loves solving problems and programming in C, C++, Java. He also has a passion to learn new technologies.