ng-i18next

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.

• 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)

You can install ng-i18next as a bower dependency:

bower install ng-i18next

You can install ng-i18next as a npm dependency:

npm install ng-i18next

You will need to

1. Move initialization of i18next from the ng-i18next provider within Angular to i18next natively before booting Angular

1. Change translations using the $i18next provider in you Angular code. From $i18next('localeKey') to $i18next.t('localeKey')

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 ##

Basics ###

```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!

HTML ###

```html

htmlhello">

``` => translates hello and compiles HTML ```html

html{{hello}}">

``` => translates $scope.hello and compiles HTML

Attributes ###

```html titlehello">This is a link. ``` => translates hello and sets it as the title ```html title{{hello}}">This is a link. ``` => translates $scope.hello and sets it as the title You can combine both, too!

Attributes + text content ###

```html titlehello;content"> ``` => translates hello and sets it as the title => translates content and sets it as the text of the link. ```html title{{hello}};{{content}}"> ``` => translates $scope.hello and sets it as the title => translates $scope.content and sets it as the text of the link.

Attributes + HTML content ###

```html titlehello;htmlcontent"> ``` => translates hello and sets it as the title => translates content and compiles the HTML as the content of the link. ```html title{{hello}};html{{content}}"> ``` => translates $scope.hello and sets it as the title => translates $scope.content and compiles the HTML as the content of the link.

Passing Options ###

You can also pass options: ```html

i18nexthello">

``` => translates hello in German (de)

Passing Options + HTML ###

Also options work perfectly together with html: ```html

html:i18nexthello">

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

Passing Options - sprintf

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.) --------- 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

--------- 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. --------- 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. --------- For changelog file please see CHANGELOG.md --------- MIT License