I18n of java script
1 like1,955 views
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.
I18n of java script
- 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
- 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
- 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!