どうでしょう藩士の飯田です。
今週末はオフィスキューファンミーティング(通称ファンミ)のため北海道に遠征します。
さて、本題です。
AngularJSで国際化だと標準ではangular-translateが一般的ですが、poファイルを使いたかったのでpoファイルに対応しているライブラリを探したところ、angularjs-gettextを見つけました。
翻訳の使い方
これはangular-translateと同じ使い方ですね。
少し違うのはpoファイルに対応するキーがない場合は以下の場合「Hello!」が表示されます。
<h1 translate="">Hello!</h1>
翻訳キーの抽出
Gruntを使って翻訳キーの抽出ができます
npmでgrunt-angular-gettextをインストール
npm install grunt-angular-gettext --save-dev
grunt-angular-gettextライブラリをロード(Gruntfile.js)
grunt.loadNpmTasks('grunt-angular-gettext');
src/viewのhtmlから翻訳キーを抽出しpo/template.potに出力する(Gruntfile.js)
grunt.initConfig({ nggettext_extract: { pot: { files: { 'po/template.pot': ['src/views/*.html'] } }, }, })
Gruntでのコンパイル
poファイルをGruntでコンパイルし、翻訳ファイルtranslations.jsを作成する(Gruntfile.js)
※ index.htmlでこのtranslations.jsをインクルードする必要があります。
grunt.initConfig({ nggettext_compile: { all: { files: { 'src/js/translations.js': ['po/*.po'] } }, }, })
元記事はこちらです。
「AngularJSの国際化(多言語)でpoファイルを使用する」