i18next for Angular.js
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
examples Update directive examples Jun 23, 2014
test Update attrib name Jun 23, 2014
.gitignore first release Apr 11, 2014
.jshintrc updates min version Apr 1, 2015
Gruntfile.js first release Apr 11, 2014
LICENSE Initial commit Apr 9, 2014
README.md Update README.md Sep 3, 2015
bower.json v0.2.0 Sep 4, 2015
i18ng.js Update i18ng.js Sep 3, 2015
i18ng.min.js generated minified Sep 4, 2015
karma.conf.js Add basic karma.conf.js Jun 23, 2014
package.json 0.2.0 Sep 4, 2015

README.md

i18ng

i18next for Angular.js

Gitter

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.

nested html i18ng-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.

attributes i18ng-<attr>

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')
  }])