Frontend Development

Home » Support Library » Developer Support » Angular Guidelines » Frontend Development

Translation

Angular Translate API

 

Resources Location

All module’s resources are stored in module/module_config/resources/en.json JSON file.

 

Resources Style Guide

Use camelCase notation to describe resources string.

 

Correct:

“moduleDescription”: “Module Description”,

 

Incorrect:

“module-description”: “Module Description”,

“module_description”: “Module Description”,

“ModuleDescription”: “Module Description”,

 

Dots can be used inside of resource name. These examples are equal:

“moduleDescription.placeholder”: “Input Module Description”,

 

 

“moduleDescription”: {
“placeholder”: “Input Module Description”
}

 

Usage in Template

Using translate directive

Using translate filter

To render resource in template you can apply translate directive to resource string Id:

<h3 translate>module.title</h3>

 

or filter:

<h3>{{‘module.title’ | translate}}</h3>
<input placeholder=”{{‘name.placeholder’ | translate}}” >

 

Directive usage is preferable, because it doesn’t create new watcher.

Usage in JavaScript

$translation service

$translate service guide

Use $translate service to get resources string in JavaScript:

angular.module(‘module-name’).controller(‘ModuleController’, [‘$translate’,
function($translate){
var title = $translate.instant(‘module.title’);
}
])