Mastering Web Application

Chapter 10

In an AngularJS application there are at least two places where we can find words
to be translated to a target language: templates (partials) and strings used in
JavaScript code.

For the rest of this chapter let's assume that we do have translated strings already
available in a convenient format, for example JSON. Such JSON could be an object
where keys correspond to logical names of fragments to be translated (For example,
crud.user.remove.success), and the values are actual translated strings for a
given locale. For example, JSON containing translations for the en-us locale could
look like follows:

{

'crud.user.remove.success': 'A user was removed successfully.',

'crud.user.remove.error': 'There was a problem removing a user.'

}

While the same JSON structure for the pl-pl locale would have the
following content:

{

'crud.user.remove.success': 'Użytkownik został usunięty.',

'crud.user.remove.error': 'Wystąpił błąd podczas usuwania

użytkownika.'

}

Handling translated strings used in AngularJS templates

Typically, a vast majority of strings to be translated are located in the AngularJS
partials. Let's considering the simple "Hello, World!" example:

<span>Hello, {{name}}!</span>

To make this partial work in different languages we need to find a way of
substituting the Hello string with its translated value for a currently selected
language. There are number of techniques that we can use here, each of them
having their pros and cons as discussed in the following section.