Page Comparison

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

...

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

{
	"my.awesome.translation.of.hello_world": "Hello World",
	"namespace.to.avoid.confusion.or.conflicts": "Each variable has a unique name to avoid conflicts"
}

...

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

- filter:

<p>{{'my.awesome.translation.of.hello_world' | translate}}</p>

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

- (filters or directive):

- filters & directive :

<!-- Favourite methodsyntax -->
<p translate>my.awesome.translation.of.hello_world</p>
<!-- OR -->
<p translate>{{my.awesome.translation.of.hello_world}}</p>
<!-- ORTo avoid if possible, but exists  -->
<p translate="<p>{{'my.awesome.translation.of.hello_world"></p>
<!-- OR -->
<p translate="{{my.awesome.translation.of.hello_world}}"><' | translate}}</p>

    -> Better approach

...

<!-- Favourite syntax -->
<p translate="my.value.to.translate.hello_x" translate-values="{name: 'John'}"></p>

...

$translate('my.value.to.translate.hello_x', {name: 'John'}).then(
	(translation) ->
		scope.yourVariable = translation
)

Any question or more examples, details: look at the well made documentation,

https://angular-translate.github.io/docs/#/guide/ or contact Clement Berti (clemthenem)

Impac (Backend): 

Sometimes the expressions to translate are set and sent from the backend.
As we need the translation to be simple and easy to manage we want to keep it in the frontend.
In order to be retro-compatible we will need to keep the current data sent by the API and add extra fields called keys.

...

The backend will then take care of the translation of these keys and falls back into the 'normal' field if no translation exist.

What you should remember

• NEVER hardcode text in a template or in a directive: use a key that has a translation in the json file

<!-- Wrong -->
<p>This is wrong</p>

<!-- Correct -->
<p translate>impac.name.path.this_is_better</p>

{
	"impac.name.path.this_is_better": "This is better"
}

• If you need to get text from the back-end, add a key field to the response and process it in the front-end.

title: "I am an english title"
//Add this field
title_key: "impac.name.path.title"

• Always create a new key, even if there is already a translation for it.
  If there is already a translation, you may assign it like a variable.

  This allow more flexibility to change the name if needed. 

  
  

  Code Block
  language xml theme RDark title src/locales/en-gb.json linenumbers true
  { "impac.common.action.cancel": "Cancel, "impac.widget.accounting_values.turnover.cancel": "@:impac.common.action.cancel" }

• Remember that translations take into account gender and pluralization.