Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Goals: Allowing multiple languages to be incorporated to the impac dashboard project (currently exclusively english).

...

You will need to translate values within the HTML code sometimes, as well as in the directives (java script files).

HTML code

Default

...

JSON file

All the translations are kept in data-interchange formats (json, yaml, ...) that are then compiled as an angularjs module.

Code Block
languagexml
themeRDark
titlesrc/locales/en-gb.json
linenumberstrue
{
	"my.awesome.translation.of.hello_world": "Hello World",
	"namespace.to.avoid.confusion.or.conflicts": "Each variable has a unique name to avoid conflicts"
}

Each variable is using a common namespace (in this case impac) to avoid potential clashes.

HTML code

Default

In order to translate terms within the HTML code, angular translate gives you several ways:

- filter:

Code Block
languagexml
themeRDark
titlesrc/views/**/some-views.html
linenumberstrue
<p>{{'my.awesome.translation.of.hello_world' | translate}}</p>

    -> This solution looks more elegant but adds unnecessary watchers (to avoid as much as possible)

- directive:
e.g: 

Code Block
languagexml
themeRDark
linenumberstrue
<!-- Favourite method -->
<p translate>my.awesome.translation.of.hello_world</p>
    <!-- OR -->
<p translate>{{my.awesome.translation.of.hello_world}}</p>

   <!-- OR -->
<p translate="my.awesome.translation.of.hello_world"></p>
   
<!-- OR -->
<p translate="{{my.awesome.translation.of.hello_world}}"></p>

...