Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/i18next/ng-i18next

translation for AngularJS using i18next
https://github.com/i18next/ng-i18next

angularjs i18next

Last synced: about 6 hours ago
JSON representation

translation for AngularJS using i18next

Awesome Lists containing this project

README 

        
# ng-i18next - use i18next with [AngularJS](https://www.angularjs.org/) [![Build Status](https://travis-ci.org/i18next/ng-i18next.svg?branch=master)](https://travis-ci.org/i18next/ng-i18next) #



Project goal is to provide an easy way to use [i18next](http://i18next.com/) with [AngularJS 1.x](http://angularjs.org/):



- `ng-i18next` directive

- `i18next` filter



First check out the [documentation](http://i18next.com) by Jan Mühlemann.



# Features #

- AngularJS provider, directive and filter

- variable binding (translates again when variable changes)

- nested translations (`$t('hello')`; see [i18next documentation](http://i18next.com/docs/))

- 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`](https://angularjs.org)

- [`ngSanitize`](https://docs.angularjs.org/api/ngSanitize#!)

- [`i18next`](http://i18next.com/)

- [`i18next-xhr-backend`](https://github.com/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.](http://i18next.com/docs/)



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



```



=> translates `hello` and compiles HTML



```html



```



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



### Attributes ###



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



### Attributes + text content ###



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



### Attributes + HTML content ###



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



### Passing Options ###

You can also pass options:



```html



```

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



### Passing Options + HTML ###

Also options work perfectly together with html:



```html



```

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



### Passing Options - sprintf

You can use i18next sprintf feature:



```html



```



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](http://i18next.com/docs/options/#t-options)



```js

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

```



=> translates copyright label and use [interpolation](http://i18next.com/translate/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](http://nodejs.org/)

- [Gulp](http://gulpjs.com/)

- [bower](http://bower.io/)

- [TypeScript](http://www.typescriptlang.org/)

- [typings](https://www.npmjs.com/package/typings)



installed.



Load all dependencies using [`npm`](https://npmjs.org/),  [`bower`](http://bower.io/) and [`typings`](https://www.npmjs.com/package/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](https://github.com/i18next/ng-i18next/blob/master/LICENSE)