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 | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
{ "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 | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
<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 | ||||||
---|---|---|---|---|---|---|
| ||||||
<!-- 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> |
...