ng-i18next - use i18next with AngularJS  #

Project goal is to provide an easy way to use i18next with AngularJS 1.x:

- ng-i18next directive
- i18next filter

First check out the documentation by Jan Mühlemann.

Features #

- AngularJS provider, directive and filter
- variable binding (translates again when variable changes)
- nested translations ($t('hello'); see i18next documentation)
- scope variables in translations (if the translation contains directives of variables like {{hello}}, they'll get compiled)
- sprintf support (directive and provider)

Installation Bower #

You can install ng-i18next as a bower dependency:

bower install ng-i18next

Installation npm #

You can install ng-i18next as a npm dependency:

npm install ng-i18next

Upgrading from <=0.5.5

You will need to
1. Move initialization of i18next from the ng-i18next provider within Angular to i18next natively before booting Angular
2. Change translations using the $i18next provider in you Angular code. From $i18next('localeKey') to $i18next.t('localeKey')

Usage #

First add

- AngularJS >=1.5.0
- ngSanitize
- i18next
- i18next-xhr-backend or a backend of your choice to load locales.
- ng-i18next

to your HTML file. AngularJS, ngSanitize, i18next, and i18next-xhr-backend have to be loaded before ng-i18next!

Before booting angular use i18next configuration system to configure and load your localization resources. Refer to i18next configuration reference.

``js
window.i18next
.use(window.i18nextXHRBackend);

window.i18next.init({
debug: true,
lng: 'de', // If not given, i18n will detect the browser language.
fallbackLng: 'dev', // Default is dev
backend: {
loadPath: '../locales/{{lng}}/{{ns}}.json'
},
useCookie: false,
useLocalStorage: false
}, function (err, t) {
console.log('resources loaded');
});
`
There are three ways to use ng-i18next:

filter ##

`html

{{'hello' | i18next}}

`

=> translates hello
`html

{{hello | i18next}}

`

=> translates $scope.hello

directive ##

$3

`html

`
=> translates hello

`html

`
=> translates $scope.hello

`html

hello

`
=> translates hello (uses the content of the p-tag)

`html

{{hello}}

`
=> translates $scope.hello (uses the content of the p-tag)

Note, that HTML isn't compiled!

$3

`html

`

=> translates hello and compiles HTML

`html

`

=> translates $scope.hello and compiles HTML

$3

`html
This is a link.
`

=> translates hello and sets it as the title

`html
This is a link.
`

=> translates $scope.hello and sets it as the title

You can combine both, too!

$3

`html

`

=> translates hello and sets it as the title
=> translates content and sets it as the text of the link.

`html

`
=> translates $scope.hello and sets it as the title
=> translates $scope.content and sets it as the text of the link.

$3

`html

`
=> translates hello and sets it as the title
=> translates content and compiles the HTML as the content of the link.

`html

`
=> translates $scope.hello and sets it as the title
=> translates $scope.content and compiles the HTML as the content of the link.

$3

You can also pass options:

`html

i18nexthello">

`
=> translates hello in German (de)

$3

Also options work perfectly together with html:

`html

html:i18nexthello">

`
=> translates hello in German (de) and compiles it to HTML code.

$3

You can use i18next sprintf feature:

`html


i18nextsprintfString">
`

where sprintfString could be The first 4 letters of the english alphabet are: %s, %s, %s and %s in your translation file.

Using the directive, postProcess:'sprintf' isn't neccassary. The directive will add it automatically when using sprintf in the options.



provider ##



=> translates hello

`js
angular
.module('MyApp', ['jm.i18next'])
.controller('MyProviderCtrl', function ($scope, $i18next) {
'use strict';
$scope.hello = $i18next.t('hello');
});
`
=> translates hello with translate options

`js
$scope.sprintf = $i18next.t('both.sprintf', { postProcess: 'sprintf', sprintf: ['a', 'b', 'c', 'd'] });
`

=> translates copyright label and use interpolation to add the year

locale
`json
{
"copyrightLabel": "Copyright __year__ Acme, Inc. All rights reserved",
}
`

JavaScript
`js
$i18next.t('copyrightLabel', { year: this.$window.moment().year() });
`

Results

Copyright 2016 Acme, Inc. All rights reserved


---------

For more, see examples.

There are two ways to run the examples:

`sh
gulp serve
`

Run this inside your ng-i18next directory.
(This requires you to have NodeJS and gulp to be installed.)

---------

Contribute #

To contribute, you must have:

- Node.js
- Gulp
- bower
- TypeScript
- typings

installed.

Load all dependencies using npm, bower and typings:

npm install
bower install
typings install

Build ng-i18next.js using Gulp:

gulp build

Test ng-i18next.js using Gulp:

gulp test

---------

Examples #

You can run the examples using:

gulp serve

_(note that you have to be in the root directory of this project)_

Do not just open the HTML files. That won't work.

---------

Supported browsers #

ng-i18next is tested with these browsers:

- latest Firefox
- latest Chrome
- IE9 and above

IE8 isn't supported.
ng-i18next` should work with every browser that is supported by AngularJS.

However, last time we checked, just adding polyfills do the job on IE8.

---------

Changelog #

For changelog file please see CHANGELOG.md

---------

License #

MIT License