Mlc Angular Translate
A translation service which makes possible WYSIWYG edition of your translation.
There are 2 libraries:
- mlc-angular-translate.(min.)js : the translation service & the translation directive
- mlc-angular-translate-panel.(min.)js: adds support of the translation panel
Demo
https://moonlight-coding.github.io/mlc-angularjs-translate/
Installation
From NPM
npm i --save mlc-angularjs-translate
From Git
# install gulp globally
npm install -g gulp
# install the packages
npm install
# build the library
gulp
How to Use
In your module definition, require MlcTranslate and MlcTranslatePanel if needed.
// if you wanna use the translations only
angular.module('MyApp', ['MlcTranslate']);
// if you wanna use the translation service
angular.module('MyApp', ['MlcTranslate', 'MlcTranslateToolbox']);
In the templates, use the mlcTranslate directive:
<span mlc-translate="keyExpression" data-group="groupExpression" data-params="paramsExpression"></span>
The attributes are:
-
mlcTranslate: the key of the translation -
group: the group in which the key is stored -
params: the parameters which are available in the translation expression
Examples:
<span mlc-translate="'Hello'"></span>
<span mlc-translate="'Hello'" data-group="'login'"></span>
<span mlc-translate="'Hello {{ params.name }}'" data-group="'login'" data-params="{name: 'Ed'}"></span>
<span mlc-translate="'Hello {{ _.name }}'" data-group="'login'" data-params="{name: 'Ed'}"></span>
Configure the service
You must define several abstract methods of the mlcTranslate service.
Define raw translations
app.run(function(mlcTranslate) {
mlcTranslate.translations = {
'my-group': {
'div': '<div style="border: 1px solid black">Test of div</div>'
}
};
});
Connect to an instance of mlc-translate-server
You must have an instance of mlc-translate-server running (http://localhost:3000 by default).
app.run(function(mlcTranslate, $http) {
// the project name
mlcTranslate.project = 'default';
// define the apiConnection
mlcTranslate.apiConnection = new MlcTranslateApiConnection($http, mlcTranslate, 'http://localhost:3000');
// ask for history (for the toolbox)
mlcTranslate.queryHistory = true;
// define the available locals
mlcTranslate.availableLocals = ["en_GB", "fr_FR"];
// set the default locale, translations will be fetched via the apiConnection
mlcTranslate.setLocale("fr_FR");
});