Menu

Add translation to your Angular App.

Usually, one translation of your app is sufficient, but sometimes your app should be available in other countries or just support the languages which are spoken in your country. As an example, in Switzerland we have the following main languages: german, french and italian, so often the site, depending on the business needs to support more than just one language. But how can we achieve that?

Recently, I created an own AngularJS seed which supports translation out of the box. But lets see how we can add it to our application.

angular-translate is the main package we need for the translation. The angular-translate-loader-static-files is needed to load our local static files and the angular-translate-loader-url to load it from a specific url which could also be on a different server. Depending on what your needs are, you can choose.

Let’s first take a look how we can translate with angular-translate, where the translations are located in the javascript file.

To make the following codes work, we need to add

1

'pascalprecht.translate'

as a dependency to our angular app something like this:

1

varapp=angular.module('myApp',['pascalprecht.translate']);

Be also sure to add the angular-translate.min.js and the other js files from loader to your page.

Simple Translation in js file

Now let’s train our app to speak a new language. To let our app speak a new language is very simple. First, we need to configure the $translate service through $translateProvider service.

1

2

3

4

angular.module('translateApp',['pascalprecht.translate'])

.config(function($translateProvider){

// Our translations will go in here

});

to add now a new language, we have simply to say what we are translating and add the translation as JSON. Let’s add the first translations for englisch (‘en’).

1

2

3

4

5

6

7

angular.module('angularTranslateApp',['pascalprecht.translate'])

.config(function($translateProvider){

$translateProvider.translations('en',{

Headline:'Hello there, This is my awesome app!',

Intro:'And it has i18n support!'

});

});

So, we have added the translation for ‘Headline’ & ‘Intro’. Now, we want to tell our HTML that we want to have these texts translated. Lets update the HTML with the following:

1

2

<h4>{{'Headline'|translate}}</h4>

<p>{{'Intro'|translate}}</p>

With adding the ID and the translate filter, our application knows, that this h4 and p has to be translated.

The translate filter works like this:

1

<p>{{'TRANSLATION_ID'|translate}}</p>

Alternatively, we can add our text also like this:

1

2

<h4 translate="Headline"></h4>

<ptranslate="Intro"></p>

This works too.

GREAT!! Our languages speaks english. Hmm, but this is quite boring, with just one language, we do not have to setup translation for that, isn’t it? Ok, lets add a second language. German for example.

1

2

3

4

5

6

7

8

9

10

11

12

angular.module('angularTranslateApp',['pascalprecht.translate'])

.config(function($translateProvider){

$translateProvider

.translations('en',{

Headline:'Hello there, This is my awesome app!',

Intro:'And it has i18n support!'

})

.translations('de',{

Headline:'Hallo, das ist meine grossartige App!',

Intro:'Und diese unterstützt nun auch Deutsch!'

});

});

So, now, our app speaks german and english. Let’s tell the app which language should be the preferred language.

If we don’t want to set the preferred language explicitly, because it should be evaluated depending on a user settings or so, we can use $translateProvider.determinePreferredLanguage().

The determinePreferredLanguage() method tries to determine the preferred language on its own by accessing browser properties. We can also pass a custom handler function that we can define to determine the user’s preferred language. For instance:

1

2

3

4

$translateProvider.determinePreferredLanguage(function(){

// define a function to determine the language

// and return a language key

});

Switch the language at runtime

To switch the language at runtime, we can use the “use()” method from $translate service.

1

2

$translate.use();// Returns the currently used language key

$translate.use('en');// Sets the active language to `en`

So, we could use this in a controller like this:

1

2

3

4

5

app.controller('SomeController',function($translate,$scope){

$scope.changeLanguage=function(langKey){

$translate.use(langKey);

};

});

Move translations to static JSON files loader

When having more and more languages to support, the above way becomes hard to maintain. It would be nicer to have the languages in own json files, right? Right!

Then angular-translate will attempt to load the language from /resources/ folder. This will then be something like locale-de_CH.json & locale-en_US.json. The language is then that, what is without the prefix and the suffix, in our case then en_US & de_CH.

Please be aware that the path is correct. This is often a problem where developers run into trouble. Test it with debug tools if you are receiving this files with correct content or try to access it through the browser with experimenting with the path.

then create the two above files in the resources folder and add this to the file for english (locale-en_US.json:

1

2

3

4

{

"Headline":'Hello there, This is my awesome app!',

"Intro":'And it has i18n support!'

}

and german (locale-de_CH.json)

1

2

3

4

{

"Headline":'Hallo, das ist meine grossartige App!',

"Intro":'Und diese unterstützt nun auch Deutsch!'

}

Don’t forget that when you use $translate.use() to use now the correct language. In this cases, it is de_CH and en_US.

Move translations to url loader

If we want to load it from an URL, we have to change the config like this:

1

2

3

4

5

6

7

angular.module('angularTranslateApp',['pascalprecht.translate'])

.config(function($translateProvider){

$translateProvider.useUrlLoader('/path/to/my/endpoint');

$translateProvider.preferredLanguage('en_US');

});

So, what happens here? angular-translate uses the extension to transform the given string, to a real loader function which can be invoked later at runtime. In addition to that, telling $translateProvider to use the language key ‘en_US’, adds the language key as request parameter to the given loader string. So, the example above actually requests/path/to/my/endpoint?lang=en_US. This can be localhost or a remote server.

angular-translate also notices that there isn’t any translation data available at startup and will invoke the loader automatically as soon as possible. If you want to have it at startup available, you can also mix these to achieve what you need.

So, now you should have the basics to start translating your. Have fun…

4 thoughts on “Add translation to your Angular App.”

Hi there! If you need to localize your JSON files used by angular translate library, you may find useful https://poeditor.com/ which is a collaborative translation management platform created to automate the translation process.