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>