{"id":14482502,"url":"https://github.com/i18next/ng-i18next","last_synced_at":"2025-04-04T17:05:08.897Z","repository":{"id":8900234,"uuid":"10622676","full_name":"i18next/ng-i18next","owner":"i18next","description":"translation for AngularJS using i18next","archived":false,"fork":false,"pushed_at":"2022-12-04T08:30:40.000Z","size":1129,"stargazers_count":160,"open_issues_count":19,"forks_count":54,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-04-01T23:45:17.422Z","etag":null,"topics":["angularjs","i18next"],"latest_commit_sha":null,"homepage":"https://github.com/i18next/ng-i18next","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/i18next.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-06-11T14:00:41.000Z","updated_at":"2025-01-02T01:10:49.000Z","dependencies_parsed_at":"2022-09-09T12:10:36.293Z","dependency_job_id":null,"html_url":"https://github.com/i18next/ng-i18next","commit_stats":null,"previous_names":["archer96/ng-i18next"],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/i18next%2Fng-i18next","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/i18next%2Fng-i18next/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/i18next%2Fng-i18next/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/i18next%2Fng-i18next/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/i18next","download_url":"https://codeload.github.com/i18next/ng-i18next/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247217172,"owners_count":20903008,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angularjs","i18next"],"created_at":"2024-09-03T00:01:10.304Z","updated_at":"2025-04-04T17:05:08.879Z","avatar_url":"https://github.com/i18next.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"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) #\n\nProject goal is to provide an easy way to use [i18next](http://i18next.com/) with [AngularJS 1.x](http://angularjs.org/):\n\n- `ng-i18next` directive\n- `i18next` filter\n\nFirst check out the [documentation](http://i18next.com) by Jan Mühlemann.\n\n# Features #\n- AngularJS provider, directive and filter\n- variable binding (translates again when variable changes)\n- nested translations (`$t('hello')`; see [i18next documentation](http://i18next.com/docs/))\n- scope variables in translations (if the translation contains directives of variables like `{{hello}}`, they'll get compiled)\n- sprintf support (directive and provider)\n\n# Installation Bower #\nYou can install `ng-i18next` as a bower dependency:\n\n\tbower install ng-i18next\n\n# Installation npm #\nYou can install `ng-i18next` as a npm dependency:\n\n\tnpm install ng-i18next\n\n# Upgrading from \u003c=0.5.5\n\nYou will need to\n1. Move initialization of i18next from the ng-i18next provider within Angular to i18next natively before booting Angular\n2. Change translations using the $i18next provider in you Angular code. From `$i18next('localeKey')` to `$i18next.t('localeKey')` \n\n# Usage #\nFirst add\n\n- [`AngularJS \u003e=1.5.0`](https://angularjs.org)\n- [`ngSanitize`](https://docs.angularjs.org/api/ngSanitize#!)\n- [`i18next`](http://i18next.com/)\n- [`i18next-xhr-backend`](https://github.com/i18next/i18next-xhr-backend) or a backend of your choice to load locales.\n- `ng-i18next`\n\nto your HTML file. `AngularJS`, `ngSanitize`, `i18next`, and `i18next-xhr-backend` have to be loaded **before** `ng-i18next`!\n\nBefore booting angular use i18next configuration system to configure and load your localization resources. Refer to [i18next configuration reference.](http://i18next.com/docs/)\n\n```js\nwindow.i18next\n\t.use(window.i18nextXHRBackend);\n\nwindow.i18next.init({\n\tdebug: true,\n\tlng: 'de', // If not given, i18n will detect the browser language.\n\tfallbackLng: 'dev', // Default is dev\n\tbackend: {\n\t\tloadPath: '../locales/{{lng}}/{{ns}}.json'\n\t},\n\tuseCookie: false,\n\tuseLocalStorage: false\n}, function (err, t) {\n\tconsole.log('resources loaded');\n});\n```\nThere are three ways to use `ng-i18next`:\n\n## filter ##\n\n```html\n\u003cp\u003e{{'hello' | i18next}}\u003c/p\u003e\n```\n\n=\u003e translates `hello`\n```html\n\u003cp\u003e{{hello | i18next}}\u003c/p\u003e\n```\n\n=\u003e translates `$scope.hello`\n\n## directive ##\n\n### Basics ###\n\n```html\n\u003cp ng-i18next=\"hello\"\u003e\u003c/p\u003e\n```\n=\u003e translates `hello`\n\n```html\n\u003cp ng-i18next=\"{{hello}}\"\u003e\u003c/p\u003e\n```\n=\u003e translates `$scope.hello`\n\n```html\n\u003cp ng-i18next\u003ehello\u003c/p\u003e\n```\n=\u003e translates `hello` (uses the content of the p-tag)\n\n```html\n\u003cp ng-i18next\u003e{{hello}}\u003c/p\u003e\n```\n=\u003e translates `$scope.hello` (uses the content of the p-tag)\n\nNote, that HTML isn't compiled!\n\n### HTML ###\n\n```html\n\u003cp ng-i18next=\"[html]hello\"\u003e\u003c/p\u003e\n```\n\n=\u003e translates `hello` and compiles HTML\n\n```html\n\u003cp ng-i18next=\"[html]{{hello}}\"\u003e\u003c/p\u003e\n```\n\n=\u003e translates `$scope.hello` and compiles HTML\n\n### Attributes ###\n\n```html\n\u003ca href=\"#\" ng-i18next=\"[title]hello\"\u003eThis is a link.\u003c/a\u003e\n```\n\n=\u003e translates `hello` and sets it as the title\n\n```html\n\u003ca href=\"#\" ng-i18next=\"[title]{{hello}}\"\u003eThis is a link.\u003c/a\u003e\n```\n\n=\u003e translates `$scope.hello` and sets it as the title\n\nYou can combine both, too!\n\n### Attributes + text content ###\n\n```html\n\u003ca href=\"#\" ng-i18next=\"[title]hello;content\"\u003e\u003c/a\u003e\n```\n\n=\u003e translates `hello` and sets it as the title\n=\u003e translates `content` and sets it as the text of the link.\n\n```html\n\u003ca href=\"#\" ng-i18next=\"[title]{{hello}};{{content}}\"\u003e\u003c/a\u003e\n```\n=\u003e translates `$scope.hello` and sets it as the title\n=\u003e translates `$scope.content` and sets it as the text of the link.\n\n### Attributes + HTML content ###\n\n```html\n\u003ca href=\"#\" ng-i18next=\"[title]hello;[html]content\"\u003e\u003c/a\u003e\n```\n=\u003e translates `hello` and sets it as the title\n=\u003e translates `content` and compiles the HTML as the content of the link.\n\n```html\n\u003ca href=\"#\" ng-i18next=\"[title]{{hello}};[html]{{content}}\"\u003e\u003c/a\u003e\n```\n=\u003e translates `$scope.hello` and sets it as the title\n=\u003e translates `$scope.content` and compiles the HTML as the content of the link.\n\n### Passing Options ###\nYou can also pass options:\n\n```html\n\u003cp ng-i18next=\"[i18next]({lng:'de'})hello\"\u003e\u003c/p\u003e\n```\n=\u003e translates `hello` in German (`de`)\n\n### Passing Options + HTML ###\nAlso options work perfectly together with html:\n\n```html\n\u003cp ng-i18next=\"[html:i18next]({lng:'de'})hello\"\u003e\u003c/p\u003e\n```\n=\u003e translates `hello` in German (`de`) and compiles it to HTML code.\n\n### Passing Options - sprintf\nYou can use i18next sprintf feature:\n\n```html\n\u003cp ng-i18next=\"[i18next]({sprintf:['a','b','c','d']})sprintfString\"\u003e\n```\n\nwhere `sprintfString` could be `The first 4 letters of the english alphabet are: %s, %s, %s and %s` in your translation file.\n\nUsing the directive, `postProcess:'sprintf'` isn't neccassary. The directive will add it automatically when using `sprintf` in the options.\n\n## provider ##\n\n=\u003e translates `hello`\n\n```js\nangular\n\t.module('MyApp', ['jm.i18next'])\n\t.controller('MyProviderCtrl', function ($scope, $i18next) {\n\t\t'use strict';\n\t\t$scope.hello = $i18next.t('hello');\n});\n```\n=\u003e translates `hello` with [translate options](http://i18next.com/docs/options/#t-options)\n\n```js\n$scope.sprintf = $i18next.t('both.sprintf', { postProcess: 'sprintf', sprintf: ['a', 'b', 'c', 'd'] });\n```\n\n=\u003e translates copyright label and use [interpolation](http://i18next.com/translate/interpolation/) to add the year\n\nlocale\n```json\n{\n    \"copyrightLabel\": \"Copyright __year__ Acme, Inc. All rights reserved\",\n}\n```\n\nJavaScript\n```js\n$i18next.t('copyrightLabel', { year: this.$window.moment().year() });\n```\n\nResults\n\nCopyright 2016 Acme, Inc. All rights reserved\n\n\n---------\n\nFor more, see examples.\n\nThere are two ways to run the examples:\n\n```sh\ngulp serve\n```\n\nRun this inside your `ng-i18next` directory.\n(This requires you to have NodeJS and gulp to be installed.)\n\n---------\n\n# Contribute #\n\nTo contribute, you must have:\n\n- [Node.js](http://nodejs.org/)\n- [Gulp](http://gulpjs.com/)\n- [bower](http://bower.io/)\n- [TypeScript](http://www.typescriptlang.org/)\n- [typings](https://www.npmjs.com/package/typings)\n\ninstalled.\n\nLoad all dependencies using [`npm`](https://npmjs.org/),  [`bower`](http://bower.io/) and [`typings`](https://www.npmjs.com/package/typings):\n\n\tnpm install\n\tbower install\n\ttypings install\n\nBuild `ng-i18next.js` using Gulp:\n\n\tgulp build\n\nTest `ng-i18next.js` using Gulp:\n\n\tgulp test\n\n---------\n\n# Examples #\n\nYou can run the examples using:\n\n\tgulp serve\n\n_(note that you have to be in the root directory of this project)_\n\nDo not just open the HTML files. That won't work.\n\n---------\n\n# Supported browsers #\n\n`ng-i18next` is tested with these browsers:\n\n - latest Firefox\n - latest Chrome\n - IE9 and above\n\nIE8 isn't supported.\n`ng-i18next` should work with every browser that is supported by AngularJS.\n\nHowever, last time we checked, just adding polyfills do the job on IE8.\n\n---------\n\n# Changelog #\n\nFor changelog file please see CHANGELOG.md\n\n---------\n\n# License #\n\n[MIT License](https://github.com/i18next/ng-i18next/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fi18next%2Fng-i18next","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fi18next%2Fng-i18next","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fi18next%2Fng-i18next/lists"}