This document discusses internationalization (i18n) in JavaScript. It begins by explaining what i18n is and how it can be supported on the server side using GNU gettext. It then introduces AngularJS and angular-gettext, which allow i18n to be supported in the client side by extracting text from Angular code and converting translations to JSON format. Angular-gettext directives and functions enable translated text to be loaded and displayed without tying client code to the server framework.

1. i18n of JavaScript
Junichi Shinohara @ HDE

2. Agenda
・What's i18n?
・How to support i18n in Server Side
・How to support i18n in Client Side
・Introduce AngularJS
・Introduce angular-gettext

3. What’s i18n?

4. What’s i18n
・i18n = Internationalization
・One system supports multiple languages

5. How to Support i18n
in Server Side

6. How to Support i18n in Server Side
・Server Side = Python, PHP, Erlang and etc.
・GNU gettext generally is used

7. How to use gettext
1. Modify source code
2. Extract texts from source code（.pot）
3. Translate texts（.po）
4. Convert translated texts into binary
translated texts（.mo）
5. Load binary translated texts on server

8. ・Use template engine like Mako
・Use _ method of gettext.py
How to use gettext
1. Modify Source Code

9. How to use gettext
2. Extract Texts from Source Code（.pot）
・Create .pot file with pybabel or xgettext

10. How to use gettext
3. Translate Texts（.po）
・Create .po file from .pot file with msgmerge
・Edit .po file with vim or Poedit

11. How to use gettext
4. Convert Translated Texts into Binary Translated Texts（.mo）
・Create .mo file with msgfmt

12. ・Load .mo file on Tornado of Python
How to use gettext
5. Load Binary Translated Texts on Server

13. ・Separate translating from developing
・Translators edit po files
・Developers edit source codes
・Useful PO file editor like Poedit
Good Points of gettext

14. How to Support i18n
in Client Side

15. How to support i18n in Client Side
・Client Side = JavaScript
・GNU gettext Generally is NOT used

16. How to support i18n in Client Side
with jQuery UI or jQuery Globalize
・Use GNU gettext Object or JSON
・We have to set texts into HTML

17. How to support i18n in Client Side
with Server’s Template
・Use GNU gettext
・But, JavaScript depends on Server Framework

18. Introduce
AngularJS

19. What’s AngularJS?
・JavaScript MVC Framework in Client Side
・Developed by Google
・Home Page:
https://angularjs.org/
・Examples:
http://www.angularjshub.com/examples/

20. What’s AngularJS?
Concepts of AngularJS
・2 Way Data Binding
・Change Value in Model = Change Value in View $(‘#hoge’).value(‘fuga’)
・Model
・Resource like REST API with $http, $q, and $resource
・Factory like Session Storage or Local Storage
・Directive / Filter / Template
・Behaviour as HTML
<div ng-model=”items” ng-repeat=”item in items | lowercase”><a>{{item}}</div>
・Controller
・Scope in HTML
<div ng-controller=”abcCtrl”></div><div ng-controller=”xyzCtrl”></div>
・Router
・Ajax Frendly URL with $router or angular-ui plugin
http://www.example.com/blog/#/page/1
・pushState / popState with HTML5 Mode

21. Introduce
angular-gettext

22. What’s angular-gettext?
・Support gettext on AngularJS
・Extract text from AngularJS codes
・Convert .po file into JSON or Object
・Home Page:
http://angular-gettext.rocketeer.be/
・Examples:
https://github.com/rubenv/angular-gettext-example

23. How to use angular-gettext
1. Modify source code
2. Extract texts from source code（.pot）
3. Translate texts（.po）
4. Convert translated texts into JSON（.json）
5. Load JSON on AngularJS or Server

24. ・Use translate directive on View
・Use gettext function on Controller
How to use angular-gettext
1. Modify Source Code

25. How to use angular-gettext
2. Extract Texts from Source Code（.pot）
・Create .pot file with Grunt and grunt-angular-gettext
・We can merge other .pot file which is created by pybael
with msguniq

26. How to use angular-gettext
3. Translate Texts（.po）
・Create .po file from .pot file with msgmerge
・Edit .po file with vim or Poedit

27. How to use angular-gettext
4. Convert translated texts into JSON（.json）
・Create .json file with Grunt and grunt-angular-gettext

28. ・Load JSON on AngularJS
How to use angular-gettext
5. Load JSON on AngularJS

29. ・translate directive
・We do NOT have to set translated texts into HTML
・JavaScript does NOT depend on Server Framework
・gettext
・Use a de fact standard
・Use the same as .po file of server side
・Translated texts is JSON format
・3rd party tool like jQuery Globalize use the JSON
Good Points of angular-gettext

30. Thank you for your attention!