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.

First, we need to install some bower packages:

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

as a dependency to our angular app something like this:

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.

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’).

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:

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:

Alternatively, we can add our text also like this:

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.

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:

Switch the language at runtime

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

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

 

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!

So, let’s change our configuration to this:

prefix (string): The prefix specifies the file prefix (including file paths)

suffix (string): The suffix specifies the file suffix (usually the extension)

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:

and german (locale-de_CH.json)

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:

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…

Add translation to your Angular App.

Also published on Medium.

Tagged on:

4 thoughts on “Add translation to your Angular App.

  • March 30, 2016 at 2:03 pm
    Permalink

    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.

    Reply
    • July 5, 2016 at 8:38 am
      Permalink

      Thanks for the shared link. Will check it out..

      Reply
  • April 13, 2016 at 7:53 am
    Permalink

    Thanks for this very easy to understand tutorial.
    I just want to point out a typo with the json static file loader
    it should be $translateProvider.useStaticFilesLoader instead of useStaticFilesLoader

    Reply

Leave a Reply

Follow

Get every new post on this blog delivered to your Inbox.

Join other followers:

Welcome Damir Kusar

Log in

Lost your password?
%d bloggers like this: