Translations
Setting up translations
Create translation definition files
For Includable, translation files are simple JSON files which contain objects with a name of the translation string as key, and the value in the specific language as the object value. These are usually placed in the web/locales directory, and have filenames that correspond with the specific locale (i.e. nl_NL.json
and en_US.json
).
Example: web/locales/en_US.json
{
"example.hello": "Hey!",
"example.hellouser": "Hey, {user}!"
}
The naming convention for the translation keys are a general prefix that corresponds with the name of the module (in this case example
.). Anything else is up to the developer, but it might be smart to group translations by period-seperated prefixes: example.menu.pages
or example.pages.edit
. Note though that translation keys are case insensitive!
Referencing translation files in module.json
Includable needs to be aware of what translations exist, so they need to be added to webOptions.translations
:
Example: module.json
{
...
"webOptions": {
"translations": {
"en_US": "web/locales/en_US.json",
"nl_NL": "web/locales/nl_NL.json"
}
},
...
}
Add scholica.translate module
Add scholica.translate
dependency to your Angular module:
var app = angular.module('ExampleApp', ['scholica.translate']);
Using translations
In your Angular app templates, you can now reference your translations using the translate
directive or filter:
<!-- Directive syntax -->
<b translate="example.hello"></b>
<!-- Directive syntax with arguments -->
<span translate="example.hellouser" translate-args="['Thomas']"></span>
<!-- Filter syntax with single argument -->
<span>{{ 'example.hellouser' | translate:'Thomas' }}</span>
<!-- Filter syntax with multiple arguments as array -->
<span>{{ 'example.hellouser' | translate:['Thomas'] }}</span>