Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
8
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

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

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/

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
8
Help us understand the problem. What are the problem?