i18n and L10njava.ociweb.com/mark/AngularLunch/i18n-L10n.pdf... /angular.min.js"> i18n and L10n Demo
I18n of java script
-
Upload
junichi-shinohara -
Category
Technology
-
view
1.178 -
download
0
description
Transcript of I18n of java script
i18n of JavaScriptJunichi Shinohara @ HDE
Agenda
・What's i18n?・How to support i18n in Server Side・How to support i18n in Client Side・Introduce AngularJS・Introduce angular-gettext
What’s i18n?
What’s i18n
・i18n = Internationalization・One system supports multiple languages
How to Support i18nin Server Side
How to Support i18n in Server Side
・Server Side = Python, PHP, Erlang and etc.・GNU gettext generally is used
How to use gettext
1. Modify source code2. 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
・Use template engine like Mako・Use _ method of gettext.py
How to use gettext1. Modify Source Code
How to use gettext2. Extract Texts from Source Code(.pot)
・Create .pot file with pybabel or xgettext
How to use gettext3. Translate Texts(.po)
・Create .po file from .pot file with msgmerge
・Edit .po file with vim or Poedit
How to use gettext4. Convert Translated Texts into Binary Translated Texts(.mo)
・Create .mo file with msgfmt
・Load .mo file on Tornado of Python
How to use gettext5. Load Binary Translated Texts on Server
・Separate translating from developing ・Translators edit po files ・Developers edit source codes・Useful PO file editor like Poedit
Good Points of gettext
How to Support i18nin Client Side
How to support i18n in Client Side
・Client Side = JavaScript・GNU gettext Generally is NOT used
How to support i18n in Client Sidewith jQuery UI or jQuery Globalize
・Use GNU gettext Object or JSON・We have to set texts into HTML
How to support i18n in Client Sidewith Server’s Template
・Use GNU gettext・But, JavaScript depends on Server Framework
IntroduceAngularJS
What’s AngularJS?
・JavaScript MVC Framework in Client Side・Developed by Google・Home Page: https://angularjs.org/・Examples: http://www.angularjshub.com/examples/
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
Introduceangular-gettext
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
How to use angular-gettext
1. Modify source code2. Extract texts from source code(.pot)3. Translate texts(.po)4. Convert translated texts into JSON(.json)5. Load JSON on AngularJS or Server
・Use translate directive on View
・Use gettext function on Controller
How to use angular-gettext1. Modify Source Code
How to use angular-gettext2. 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
How to use angular-gettext3. Translate Texts(.po)
・Create .po file from .pot file with msgmerge
・Edit .po file with vim or Poedit
How to use angular-gettext4. Convert translated texts into JSON(.json)
・Create .json file with Grunt and grunt-angular-gettext
・Load JSON on AngularJS
How to use angular-gettext5. Load JSON on AngularJS
・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
Thank you for your attention!