Perform Internationalization And Localization With Angular Translate

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:

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:

http://crowdin.com/

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:-

2.Download

Install angular translate and angular-translate-loader-static-files module

Via Bower:

Via npm:

3.Embed it in your HTML document

Add script file to your HTML file

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