Frontend Development

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


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.



“moduleDescription”: “Module Description”,



“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’,
var title = $translate.instant(‘module.title’);