ng-i18next - use i18next with AngularJS 
Project goal is to provide an easy way to use i18next with AngularJS:
ng-i18nextdirectivei18nextfilter
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)
- support for default values to be displayed before i18next engine is initialized
You can install ng-i18next as a bower dependency:
bower install ng-i18next
First add
AngularJSngSanitizei18nextng-i18next
to your HTML file. AngularJS, ngSanitize and i18next have to be loaded before ng-i18next!
Make sure you require jm.i18next as a dependency of your AngularJS module. Also configurate the provider first:
angular.module('jm.i18next').config(['$i18nextProvider', function ($i18nextProvider) {
$i18nextProvider.options = {
lng: 'de',
useCookie: false,
useLocalStorage: false,
fallbackLng: 'dev',
resGetPath: '../locales/__lng__/__ns__.json',
defaultLoadingValue: '' // ng-i18next option, *NOT* directly supported by i18next
};
}]);For testing purposes set up a server. Don't open your files directly because i18next then fails to load the language files!
For more options visit the i18next documentation.
There are two ways to use ng-i18next:
<p>{{'hello' | i18next}}</p>=> translates hello
<p>{{hello | i18next}}</p>=> translates $scope.hello
<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!
<p ng-i18next="[html]hello"></p>=> translates hello and compiles HTML
<p ng-i18next="[html]{{hello}}"></p>=> translates $scope.hello and compiles HTML
<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!
<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.
<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.
You can also pass options:
<p ng-i18next="[i18next]({lng:'de'})hello"></p>=> translates hello in German (de)
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.
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.
For more, see examples.
There are two ways to run the examples:
gulp serveRun this inside your ng-i18next directory.
(This requires you to have NodeJS and gulp to be installed.)
python -m SimpleHTTPServer 8000Create a simple pyhton HTTP server. Run this inside the ng-i18next folder.
You must have python installed, of course.
Then go to http://localhost:8000.
i18next supports providing a defaultValue when requesting any translation. But what happens when i18next hasn't been fully initialized yet?
ng-i18next adds a defaultLoadingValue option, which can be provided either in $i18nextProvider.options or with any individual
translation request just like you would defaultValue. If i18n strings need to be rendered before i18next is initialized,
these special loading values will be used instead.
$i18nextProvider.options = {
/* ... */
defaultLoadingValue: ''
};(in template)
<p>{{'hello' | i18next}}</p>=> displays an empty string (visually nothing) until i18next is initialized, then translates hello
<p>{{'hello' | i18next:{'defaultLoadingValue':'Loading...'} }}</p>=> displays "Loading..." until i18next is loaded, then translates hello
<p>{{'not-translated-welcome-key' | i18next:{'defaultLoadingValue':'Loading...', 'defaultValue':'Welcome!'} }}</p>=> displays "Loading..." until i18next is loaded, then translates not-translated-welcome-key with default of "Welcome!"
if the key is not defined in your i18n file
To contribute, you must have:
installed.
Load all dependencies using npm and bower:
npm install
bower 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