ErikAndreas/0background.md

## 0background.md

      
    Raw
  

              0background.md
            
          
    Been looking for a full stack including tools for gettext-style i18n with AngularJS.

Gettext-style support in markup (html and javascript) supporting singular, plural and interpolation/sprintf
Tooling for extraction of strings to be translated (to .pot) from html and javascript
Tooling for generating .json of .po files

Ended up (working proof of concept) with the following:

"lingua", an AngularJS module wrapping Jed
Some AngularJS bootstrapping
pybabel for xgettext style translations extraction (to .pot)
po2json for generating .json files (per translation) from .po files


## 1usage.html
<!-- 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>

## 2usage.js
// 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"));
}]);


## 3lingua.js
// 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();
    };
}]);

## 4run.js
// Angular init stuff

angular.module('swl').run(['$rootScope',...,'linguaService',function($rootScope,...,linguaService) {
  $rootScope._ = linguaService._;
  $rootScope._n = linguaService._n;
  ...
}]);

## 5index.html
<!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>

## 6workflow.md

      
    Raw
  

              6workflow.md
            
          
    ##Requirements:

python + pybabel + jinja2
nodejs + >npm install -g po2json

##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
	<!-- 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>