Infrastructure and internationalization for web app(s) using JSON only API
You could find this plugin really helpful.
As far as the usage , it is quite simple to set it up for a single page application that is powered by a JSON API.
If we take a look at a sample usage :
HTML:
<!DOCTYPE html><html> <head> <script type="text/javascript" src="[PATH]/jquery.js" /> // optional <script type="text/javascript" src="[PATH]/i18next.js" /> </head> <body> <ul class="nav"> <li><a href="#" data-i18n="nav.home"></a></li> <li><a href="#" data-i18n="nav.page1"></a></li> <li><a href="#" data-i18n="nav.page2"></a></li> </ul> </body>Json (loaded resource):
{ "app": { "name": "i18next" }, "nav": { "home": "Home", "page1": "Page One", "page2": "Page Two" }}JS:
i18n.init(function(t) { // translate nav $(".nav").i18n(); // programatical access var appName = t("app.name");});
https://github.com/wikimedia/jquery.i18n may be close match. It can handle a lot of languages and messages are in json files and it is complete client side library.
If all of your interface code lives on the client side, so should your i18n. You would use a i18n library that works with the JavaScript framework you are using. For angular, that might be angular-gettext.
If you are developing several client you might use different i18n libraries in different client applications. Try to make sure they all compile gettext .po files – it will make it easier for your translators.