grunt
AngularJS
国際化
多言語
poファイル

AngularJSの国際化(多言語)でpoファイルを使用する

More than 3 years have passed since last update.

AngularJSで国際化だと標準ではangular-translateが一般的ですが、poファイルを使いたかったのでpoファイルに対応しているライブラリを探したところ、angularjs-gettextを見つけました。


翻訳の使い方

これはangular-translateと同じ使い方ですね。

少し違うのはpoファイルに対応するキーがない場合は以下の場合「Hello!」が表示されます。


sample

<h1 translate>Hello!</h1>


※これはPHPのgettextと同じ仕様ですね。


翻訳キーの抽出

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を作成する

※ index.htmlでこのtranslations.jsをインクルードする必要があります。


Gruntfile.js

grunt.initConfig({

nggettext_compile: {
all: {
files: {
'src/js/translations.js': ['po/*.po']
}
},
},
})

参考サイト

https://angular-gettext.rocketeer.be/dev-guide/