• Stars
    star
    160
  • Rank 227,318 (Top 5 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 11 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

translation for AngularJS using i18next

ng-i18next - use i18next with AngularJS Build Status

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

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.

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

<p>{{'hello' | i18next}}</p>

=> translates hello

<p>{{hello | i18next}}</p>

=> translates $scope.hello

directive

Basics

<p ng-i18next="hello"></p>

=> translates hello

<p ng-i18next="{{hello}}"></p>

=> translates $scope.hello

<p ng-i18next>hello</p>

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

<p ng-i18next>{{hello}}</p>

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

Note, that HTML isn't compiled!

HTML

<p ng-i18next="[html]hello"></p>

=> translates hello and compiles HTML

<p ng-i18next="[html]{{hello}}"></p>

=> translates $scope.hello and compiles HTML

Attributes

<a href="#" ng-i18next="[title]hello">This is a link.</a>

=> translates hello and sets it as the title

<a href="#" ng-i18next="[title]{{hello}}">This is a link.</a>

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

You can combine both, too!

Attributes + text content

<a href="#" ng-i18next="[title]hello;content"></a>

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

<a href="#" ng-i18next="[title]{{hello}};{{content}}"></a>

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

Attributes + HTML content

<a href="#" ng-i18next="[title]hello;[html]content"></a>

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

<a href="#" ng-i18next="[title]{{hello}};[html]{{content}}"></a>

=> 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:

<p ng-i18next="[i18next]({lng:'de'})hello"></p>

=> translates hello in German (de)

Passing Options + HTML

Also options work perfectly together with html:

<p ng-i18next="[html:i18next]({lng:'de'})hello"></p>

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

Passing Options - sprintf

You can use i18next sprintf feature:

<p ng-i18next="[i18next]({sprintf:['a','b','c','d']})sprintfString">

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

angular
	.module('MyApp', ['jm.i18next'])
	.controller('MyProviderCtrl', function ($scope, $i18next) {
		'use strict';
		$scope.hello = $i18next.t('hello');
});

=> translates hello with translate options

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

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

locale

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

JavaScript

$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:

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:

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

More Repositories

1

react-i18next

Internationalization for react done right. Using the i18next i18n ecosystem.
JavaScript
8,979
star
2

i18next

i18next: learn once - translate everywhere
JavaScript
7,433
star
3

next-i18next

The easiest way to translate your NextJs apps.
TypeScript
5,289
star
4

i18next-browser-languageDetector

language detector used in browser environment for i18next
JavaScript
821
star
5

i18next-scanner

Scan your code, extract translation keys/values, and merge them into i18n resource files.
JavaScript
532
star
6

i18next-parser

Parse your code to extract translation keys/values and manage your catalog files
JavaScript
446
star
7

i18next-http-backend

i18next-http-backend is a backend layer for i18next using in Node.js, in the browser and for Deno.
JavaScript
416
star
8

i18next-node

[deprecated] can be replaced with v2 of i18next
JavaScript
261
star
9

i18next-xhr-backend

[deprecated] can be replaced with i18next-http-backend
JavaScript
253
star
10

i18next-express-middleware

[deprecated] can be replaced with i18next-http-middleware
JavaScript
206
star
11

i18next-gettext-converter

converts gettext .mo or .po to 18next json format and vice versa
JavaScript
190
star
12

jquery-i18next

jQuery-i18next is a jQuery based Javascript internationalization library on top of i18next. It helps you to easily internationalize your web applications.
HTML
167
star
13

i18next-gitbook

HTML
161
star
14

next-app-dir-i18next-example

Next.js 13/14 app directory feature in combination with i18next
JavaScript
158
star
15

i18next-http-middleware

i18next-http-middleware is a middleware to be used with Node.js web frameworks like express or Fastify and also for Deno.
JavaScript
146
star
16

react-i18next-gitbook

CSS
93
star
17

next-app-dir-i18next-example-ts

Next.js 13/14 app directory feature in combination with i18next
TypeScript
91
star
18

i18next-fs-backend

i18next-fs-backend is a backend layer for i18next using in Node.js and for Deno to load translations from the filesystem.
JavaScript
87
star
19

i18next-localstorage-backend

This is a i18next cache layer to be used in the browser. It will load and cache resources from localStorage and can be used in combination with the chained backend.
JavaScript
80
star
20

i18next-icu

i18nFormat plugin to use ICU format with i18next
JavaScript
75
star
21

i18next-node-fs-backend

[deprecated] can be replaced with i18next-fs-backend
JavaScript
65
star
22

i18next-vue

Internationalization for Vue 2 & 3 using the i18next ecosystem
TypeScript
64
star
23

i18next-chained-backend

An i18next backend to chain multiple backends (add fallbacks, caches, ...)
JavaScript
62
star
24

i18nextify

enables localization of any page with zero effort.
JavaScript
61
star
25

next-language-detector

This package helps to handle language detection in next.js when using static servers only.
JavaScript
55
star
26

i18next-resources-to-backend

This package helps to transform resources to an i18next backend
JavaScript
49
star
27

i18next-android

i18next internationalization library for Android
Java
41
star
28

i18next-webtranslate

[deprecated] Translation User Interface for i18next - successor locize.com
JavaScript
41
star
29

i18next-ios

i18next internationalization library for iOS
Objective-C
28
star
30

i18next-sprintf-postProcessor

sprintf post processor for i18next
JavaScript
28
star
31

i18next-resources-for-ts

This package helps to transform resources to be used in a typesafe i18next project.
JavaScript
28
star
32

i18next-localStorage-cache

[deprecated] caching layer for i18next using browsers localStorage
JavaScript
25
star
33

i18next-intervalPlural-postProcessor

post processor for i18next enabling interval plurals
JavaScript
24
star
34

i18next-fluent

i18nFormat plugin to use mozilla fluent format with i18next
JavaScript
22
star
35

i18next-multiload-backend-adapter

This is a i18next backend to enable another backend's multiload behaviour of loading multiple lng-ns combinations with one request.
JavaScript
15
star
36

next-app-dir-i18next-no-locale-path-example

JavaScript
11
star
37

i18next-emoji-postprocessor

This is a postProcessor plugin for i18next using in Node.js and in the browser that replaces all words with emojis.
JavaScript
10
star
38

i18next-v4-format-converter

This package helps to convert old i18next translation resources to the new i18next v4 json format.
JavaScript
9
star
39

i18next.com

[obsolete] was replaced by i18next-gitbook! i18next.com website
JavaScript
7
star
40

grunt-i18next

Bundle language resource files for i18next.
JavaScript
6
star
41

i18next-translation-parser

parses i18next translations to AST
JavaScript
6
star
42

i18next-node-remote-backend

[deprecated] can be replaced with i18next-http-backend
JavaScript
6
star
43

omi-i18n

omi-i18n solution for omi.js using i18next ecosystem
JavaScript
5
star
44

i18next-fluent-backend

i18next backend to load fluent formatted .ftl files via xhr
JavaScript
4
star
45

i18next-polyglot

i18nFormat plugin to use airbnb/polyglot.js format with i18next
JavaScript
4
star
46

i18next-cli-app-example

i18next in a cli app
JavaScript
2
star
47

bs-react-i18next

Bucklescript + ReasonReact binding for react-i18next components.
OCaml
1
star