Been looking for a full stack including tools for gettext-style i18n with AngularJS.
Ended up (working proof of concept) with the following:
| <!-- sample usage html/partial/view markup --> | |
| {{_("Your last.fm username")}}:<br/> | |
| <input ng-model="lastFMuserName"/> <button ng-click="setLastFMuserName()">{{_("Set")}}</button> | |
| <h3>{{_n("Suggestion","Suggestions",suggs.length)}}</h3> |
| // sample usage in Angular service | |
| angular.module('swl').factory('artistAlbumModelService',['linguaService', ... ,function(linguaService, ...) { | |
| addArtistAlbum:function(ar,al) { | |
| if (artistAlbumModelService.containsArtistAlbum(ar,al)) { | |
| statusService.add('error',linguaService._("Skipping duplicate, %1$s %2$s is already in the list",[ar,al])); | |
| ... | |
| }]); | |
| // sample usage in Angular controller | |
| angular.module('swl').controller('SettingsCtrl',['$scope', ..., function($scope, ...) { | |
| statusService.add('info',$scope._("import complete")); | |
| }]); | |
| // init | |
| var Lingua = { | |
| init:function(doc,cb) { | |
| "use strict"; | |
| var locale = localStorage.getItem('locale'); | |
| console.log(locale); | |
| if (locale) { | |
| var s = doc.createElement('script'); | |
| s.setAttribute('src', "//code.angularjs.org/1.1.5/i18n/angular-locale_"+locale+".js"); | |
| doc.body.appendChild(s); | |
| } else { | |
| locale = "en-us"; | |
| } | |
| microAjax('l_'+locale+'.json',function(data) { | |
| data = JSON.parse(data); | |
| var i18n = new Jed({ | |
| "domain" : locale, | |
| "missing_key_callback" : function(key) { | |
| console.error("Missing key " + key + " for " + locale); | |
| }, | |
| locale_data : data | |
| }); | |
| console.log(i18n); | |
| window.i18n = i18n; | |
| cb(); | |
| }); | |
| } | |
| }; | |
| // the lingua module | |
| angular.module('lingua',[]); | |
| angular.module('lingua').factory('linguaService',function() { | |
| var linguaService = { | |
| _:function(singular, vars) { | |
| return i18n.translate(singular).fetch(vars); | |
| }, | |
| _n:function(singular, plural,n, vars) { | |
| if (n) { | |
| return i18n.translate(singular).ifPlural(n, plural).fetch(n); | |
| } else { | |
| return i18n.translate(singular).fetch(vars); | |
| } | |
| } | |
| }; | |
| return linguaService; | |
| }); | |
| // usage in view/partial: ng-click:changeLocale('sv-se); | |
| angular.module('lingua').controller('linguaController',['$scope', '$window',function linguaController($scope,$window) { | |
| $scope.changeLocale = function(locale) { | |
| // so, only way to reload $locale is on full page reload | |
| // and load angular-locale_xx-yy.js | |
| localStorage.setItem('locale',locale); | |
| $window.location.reload(); | |
| }; | |
| }]); |
| // Angular init stuff | |
| angular.module('swl').run(['$rootScope',...,'linguaService',function($rootScope,...,linguaService) { | |
| $rootScope._ = linguaService._; | |
| $rootScope._n = linguaService._n; | |
| ... | |
| }]); |
| <!doctype html> | |
| <html lang="en" xmlns:ng="http://angularjs.org"> <!-- manual bootstrap so no ng-app --> | |
| ... | |
| <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script> | |
| <script src="js/app.js"></script> | |
| <script src="js/controllers.js"></script> | |
| <script src="js/services.js"></script> | |
| <script src="js/directives.js"></script> | |
| <script src="js/lingua.js"></script> | |
| <script src="js/vendor/jed.js"></script> | |
| <script src="js/vendor/microajax.js"></script> | |
| <script> | |
| angular.element(document).ready(function() { | |
| console.log('angular doc ready'); | |
| Lingua.init(document, function() { | |
| angular.bootstrap(document, ['swl']); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
##Requirements:
##Simple babel.cfg file: [javascript:*.js] encoding = utf-8
[jinja2: *.html] encoding = utf-8
##Workflow: ###Generate .pot file:
pybabel extract -F babel.cfg -k _n:1,2 -k _ -o translations/messages.pot . partials js
###Translations tool like poedit to create a catalog and make translations (outputs .po/.mo files)
###Generate .json
po2json translations/sv-se.po l_sv-se.json
Glad if it helped!
I've yet not found any issues, however - the extraction (look at the pybabel command) and the functionality (wrapping Jed) is based on pure function calls within an expression (no filtering), i.e _("string to extract") or _n("singular", "plural", n)
I don't understand how (or why) you'd want to extract (for translation) what your example denotes.
But, it is problematic when/if pybabel fails (silently) and stops extraction for that entire file.
This is the most gettext-like workflow for Angular (with no server-side magic) I've been able to find/come up with, any suggestions for improvements will be most appreciated!
Not gettext-style but maybe interesting for you guys @paumoreno @ErikAndreas: angular-translate -http://pascalprecht.github.io/angular-translate
Thanks for this nice gist! It has been very enlightening :)
I found, though, that some AngularJS syntax can break the jinja2 exctraction method. The problematic token I found is
||(e.g.<span>{{newsItem.total_votes.votes || 0}}</span>). Whenever the extractor finds the double pipe, it fails silently for that file, and none of the translation strings found there appears in the .pot file.Have you encountered any other problem concerning the incompatibilities between AngularJS templates and jinja2?