Page Comparison

...

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

{

...

	"my.awesome.translation.of.hello_world": "Hello World"

...

}

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

- directive:
e.g: 

<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>

    -> Better approach

Advanced (translations with variables)

You can create more complex structure then a simple string translation. You can add variables.

src/locales/en-gb.json

{
	"my.value.to.translate.hello_x": "Hello {name}"
}

...

- directive:
e.g: 

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

...

To translate an expression in a controller you need to use angular translate service: $translate
Since Angular translate is asynchronous, it will return a promise.
Once you've imported it in your controller you can simply use it like this:

module.controller('...', ($translate) ->
	[...]
	$translate('my.awesome.translation.of.hello_world').then(
		(translation) ->
			scope.yourVariable = translation
	)
)

...

	// OR (if you have many values to translate)

...

	$translate(['my.awesome.translation.of.hello_world', 'another.value.cat']).then(
		(translation) ->
			scope.yourVariable = translation.["my.awesome.translation.of.hello_world"]
			scope.anotherVariable = translation.["another.value.cat"]
	)
)

Advanced

$translate('my.value.to.translate.hello_x', {name: "John"}).then(

...

	(translation) ->

...

		scope.yourVariable = translation

...

)

Any question, 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.

    <!-- OR -->