I prefer something like 1.
We are working on a rather huge Angular.js SPA application that also supports i18n. First we used full localization (if I remember this correctly)
But when the application got bigger and bigger, it became difficult to manage i18n files by uploading them to a page (and you only need to download the necessary lines, because the i18n file is huge!), Etc.
In addition, the user rarely changes the language, he does not need to be dynamic, fast, two-way or other. This is normal if we reload the entire application.
So why did we think? We do not need i18n in the interface. We need i18n in our "application". Then I wrote a build system on node.js, basically it is a preprocessor that parses all the *.html and *.js files that we have, extracts the lines from them, looks through them using the i18n file, places the localized string and creates copies files per word count.
Thus, we create n applications instead of 1, all software-generated, each in a different language.
It works very well. When the user changes the language, we reload the page and turn on another localized set of files, and the language changes!
Example html file source:
<header>@message("string.to.be.localized.1"i "{{name}}")</header>
Example js file:
angular.module("app", []) .directive("x", function(i18n) { return { templateUrl: "@HTML/templates/a.html", link: function() { console.log(i18n("string.in.js", "Umut")); } } })
After compilation:
source.en.html
<header>Hello {{name}}</header>
source.tr.html
<header>Merhaba {{name}}</header>
sample.en.js
angular.module("app", []) .directive("x", function(i18n) { return { templateUrl: "/templates/a.en.html", link: function() { console.log("Hello {0}", "Umut")); } } })
sample.tr.js
angular.module("app", []) .directive("x", function(i18n) { return { templateUrl: "/templates/a.tr.html", link: function() { console.log("Merhaba {0}", "Umut")); } } })