README
mg-translate
Simple and lightweight (~3kb) angular translate library with format similar to yii or drupal
Installation
Install with Bower
$ bower install mg-translate
Install with NPM
$ npm install mg-translate
Examples
See a page on github.io as a library example
Using directive
<!-- Simple example -->
<h1 t>Hello world</h1>
<t>sample</t>
<!-- Translate an attribute -->
<input type="email" placeholder="Email" t="placeholder">
<!-- Using plural rules -->
<span t values="10">{n} Day|{n} Days</span>
<!-- Using additional variables -->
<h1 t values="{ user: 'John' }">Hello, {user}</h1>
Using filter
<h1>{{ 'Welcome' | t }}</h1>
Using service
function SampleController(t) {
this.text = t('Welcome');
}
Load translations
Using provider config
angular
.module('app')
.config(function config(tProvider) {
tProvider.load('/languages/ru.json'); // Load translations from file
tProvider.load('ru', { // Load directly
'Test' : 'Тест'
});
tProvider.load('ru', '$plural', function(n) { // Load plural rules function
...
});
});
Using service
function SampleController(t) {
t.load('ru', { // Load directly
'Test' : 'Тест'
});
t.load('/languages/ru.json').then(function() { // Load translations from file
console.log('language is loaded');
});
}
Load plural rules
Plural rule is just a function which gets a number and returns the corresponding index. You can get plural rules for required languages. on js-simple-plurals.
function SampleController(t) {
t.load('ru', '$plural', function(n) { // Load plural rules function
// function from https://github.com/megahertz/js-simple-plurals/blob/master/web/ru.js
});
}
Load translation file
// app.config.js:
angular
.module('app')
.config(function config(tProvider) {
tProvider.load('/languages/ru.json');
});
ru.json:
{
"language": "ru",
"data": {
"Welcome": "Добро пожаловать",
"User": "Пользователь",
…
},
"$plural": "function (p) { var n = Math.abs(p)||0, i = Math.floor(n,10)||0,
v = ((p+'').split('.')[1]||'').length, i10 = i % 10, i100 = i % 100;
return v === 0 && i10 === 1 && i100 !== 11 ? 0 : v === 0 && (i10 >= 2 && i10 <= 4)
&& !(i100 >= 12 && i100 <= 14) ? 1 : v === 0 && i10 === 0 || v === 0
&& (i10 >= 5 && i10 <= 9) || v === 0 && (i100 >= 11 && i100 <= 14) ? 2 : 3; }"
}
Load translations as a module config
(function() {
'use strict';
var TRANSLATIONS = {
'Download' : 'Скачать',
…
};
angular
.module('mg.translate')
.config(config);
/** @ngInject */
function config(tProvider) {
tProvider.load('ru', '$plural', function(p) {
// plural rule
});
tProvider.load('ru', TRANSLATIONS);
}
})();
Just load this file as regular angular file
<script src="langs/ru.js"></script>
API Documentation
Provider tProvider
load(url:string) — Loads translation from a json file.
load(language:string, [category:string='app'], translations:Object) — Loads translations from Object.
load(language:string, '$plural', pluralRules:Function) — Loads plural rules.
language(language:string) — Sets an application language. If the language is not set the library tries to detect it automatically using a navigator object or a value from localStorage.lang. To disable autodetection you can set a false value.
language() — Returns an application language.
Service t
t(text:string, [null, category:string='app']) - Translates the text.
t(text:string, number:number, [category:string='app']) - Translates the text using plural rules. Or just replace {n} placeholder in text by the number.
t(text:string, values:Object, [category:string='app']) - Translates the text and replaces each placeholder by a corresponding value.
t.load(url:string):Promise — Loads translation from a json file
t.load(language:string, [category:string='app'], translations:Object) — Loads translations from Object.
t.load(language:string, '$plural', pluralRules:Function) — Loads plural rules.
t.language(language:string) — Sets an application language. If the language is not set the library tries to detect it automatically using a navigator object or a value from localStorage.lang. To disable autodetection you can set a false value.
t.language() — Returns an application language.
Filter t
The t filter function is the same as t() service function.
Directive t
The t directive can be used as an element or as an attribute. values and category parameters are the same as for t() service function.
<ANY
[t="{string}"]
[values="{number|Object}"]
[category="{string}"]>
</ANY>
<t
[values="{number|Object}"]
[category="{string}"]>
</t>
Parameters
Name | Default | Description |
---|---|---|
t (optional) | 'html' | A list of attributes which must be translated, separated by comma. The html means an element content |
values (optional) | null | Number for plural rules or values to replace placeholders |
category (optional) | 'app' | Translations category |
License
Licensed under MIT.