Help us understand the problem. What is going on with this article?

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

More than 5 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/

k-iida
インフラ、サーバーサイド、フロントエンドとWebサービス開発を一通り経験しました。 現職はVPoE兼SREとして、エンジニア採用やチームビルディング、サイト運用および信頼性向上対策をしています。 最近はFaaSやHRに興味があります。
monopos
小売運営のすべてをオールインワンパッケージにした「Monopos(モノポス)」を開発・運営するテックベンチャー
https://monopos.co.jp/
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