i18ng
i18next for Angular.js
Installation
Using Bower:
$ bower install i18ng --save
Dependencies
- You'll also need to have i18next installed. (
$ bower install i18next --save
) - ngSanitize is required for translations containing html elements. (
$ bower install angular-sanitize --save
)
Setup
var app = angular.module('MyApp', ['i18ng', 'ngSanitize'])
app.config(['i18ngProvider', function(i18ngProvider) {
i18ngProvider.init({
resGetPath: '/examples/locales/__lng__/__ns__.json'
})
}])
Usage
Filter
The filter is simply t
.
simple translations
Translate hello_world
:
{{ 'hello_world' | t }}
Translate $scope.greeting
:
{{ greeting | t }}
using options
Given the following translation dictionary:
{
"score": "Score: __score__",
"lives": "1 life remaining",
"lives_plural": "__count__ lives remaining"
}
Translates score
with a score
option:
<!-- With a number literal -->
{{ 'score' | t:{'score':10000} }}
<!-- With a variable on $scope -->
{{ 'score' | t:{'score':playerScore} }}
Translates lives
with a count
option:
<!-- prints: 3 lives remaining -->
{{ 'lives' | t:{'count':3} }}
<!-- prints: 1 life remaining -->
{{ 'lives' | t:{'count':1} }}
html values
To render HTML from a translation value, you must use the ng-bind-html
directive. Angular will escape your html characters if you try {{ 'translation.with.html' | t }}
.
Given the following translation dictionary:
{
"strong": "Some <strong>bolded</strong> text."
}
Translates strong
with HTML:
<div ng-bind-html="'strong' | t"></div>
Renders: Some bolded text.
Directive
The directive is restricted to attributes. The key attribute is i18ng
. Other
attributes are use as well, all prefixed by i18ng-
.
simple translations
Translate hello_world
:
<span i18ng="'hello_world'"></span>
Translate $scope.greeting
:
<span i18ng="greeting"></span>
using options
Given the following translation dictionary:
{
"score": "Score: __score__",
"lives": "1 life remaining",
"lives_plural": "__count__ lives remaining"
}
Translates score
with a score
option:
<!-- With a number literal -->
<span i18ng="'score'" i18ng-opts="{score:10000}"></span>
<!-- With a variable on $scope -->
<span i18ng="'score'" i18ng-opts="{score:playerScore}"></span>
Translates lives
with a count
option:
<!-- prints: 3 lives remaining -->
<span i18ng="'lives'" i18ng-opts="{count:3}"></span>
<!-- prints: 1 life remaining -->
<span i18ng="'lives'" i18ng-opts="{count:1}"></span>
html values
You can choose to support html values coming from your translation keys by including the i18ng-html
attribute.
Given the following translation dictionary:
{
"strong": "Some <strong>bolded</strong> text."
}
Translates strong
with HTML:
<span i18ng="'strong'" i18ng-html></span>
Renders: Some bolded text.
i18ng-nested-html
nested html For more complex markup (containing application logic), you can use the i18ng-nested-html
attribute to include tags (or even compiled html) inline with your text.
Given the following translation dictionary:
{
"text_with_link" : "Here is an <icon>, a <#link-one>link</link-one> and <#link-two>another</link-two>."
}
Translates text_with_link
with nested tags inserted:
<p i18ng-nested-html i18ng="'text_with_link'">
<a href="http://example.com" class="link" i18ng-tag-name="link-two"></a>
<a href="http://foo.com" class="link" i18ng-tag-name="link-one"></a>
<i class="fa fa-trash" i18ng-tag-name="icon"></i>
</p>
Renders:
<p>
Here is an <i class="fa fa-trash"></i>, a <a href="http://foo.com" class="link">link</a>
and <a href="http://example.com" class="link">another</a>.
</p>
Note: the order of the inserted tags matches the translation order, not the original source order. Also, any child tags NOT used in the translation will be removed.
i18ng-<attr>
attributes Translating attributes on an element is supported as well. To add a title
attribute, use i18ng-title
:
<a href="#" i18ng i18ng-title="'click_here'"></a>
the key click_here
will be translated and the result will be placed into a
title
attribute like so:
<a href="#" title="Click Here!"></a>
Attributes even support options:
<span i18ng i18ng-title="'lives'" i18ng-title-opts="{count:3}"></span>
Service
An i18ng
service is available that can be injectected into your own controllers, directives and services. Use the t
method to perform the translation.
angular.module('myModule')
.controller('myCtrlr', function($scope, i18ng) {
$scope.translatedText = i18ng.t('somekey')
}])