AngularJS のフィルタを日本語表記に合わせる

AngularJS で currency フィルタや date フィルタを日本語の表記に合わせるには？

AngularJS のフィルタは便利な機能です。その中で currency フィルタや date フィルタといった、フォーマットを整えてくれるフィルタがありますが、デフォルトでは US 表記になっています。これを日本語の表記に合わせるには、angular-i18n モジュールを利用します。

以下の方法は grunt-wiredep使用の環境でangular-i18nをbowerでインストールしたら注入できないとメッセージ - Qiita を参考にさせていただきました。

angular-i18n モジュールをインストールする

Bower を利用してインストールします。

1
2
3
4
5
6
7
8
$ bower install angular-i18n --save
bower not-cached    git://github.com/angular/bower-angular-i18n.git#*
bower resolve       git://github.com/angular/bower-angular-i18n.git#*
bower download      https://github.com/angular/bower-angular-i18n/archive/v1.2.24.tar.gz
bower extract       angular-i18n#* archive.tar.gz
bower invalid-meta  angular-i18n is missing "main" entry in bower.json
bower resolved      git://github.com/angular/bower-angular-i18n.git#1.2.24
bower install       angular-i18n#1.2.24

ん？ bower invalid-meta angular-i18n is missing "main" entry in bower.json という警告が出ていますね。
同時に gulp serve などを走らせていた場合、以下のような警告が出てしまいます。

1
2
angular-i18n was not injected in your file.
Please go take a look in "app/bower_components/angular-i18n" for the file you need, the manually include it in your file.

Bower が angular-i18n モジュールのうち、どのファイルをインクルードしていいのかわからないようです。

angular-i18n の main を指定する

bower.json で明示的に使用するロケールファイルを指定してあげましょう。

bower.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  "name": "myApp",
  "version": "0.0.0",
  ... 省略 ....
  "resolutions": {
    "angular": "1.3.x",
    "jquery": "2.x.x"
  },
  //=== ここから追記 ===
  "overrides": {
    "angular-i18n": {
      "main": "angular-locale_ja-jp.js"
    }
  }
  //=== ここまで追記 ===
}

これで index.html に自動的に追記されるようになります。

index.html の抜粋
1
2
3
4
5
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-i18n/angular-locale_ja-jp.js"></script>
<!-- endbower -->

日本語表記に変わったか確かめてみる

以下のような HTML と JS を用意し、レンダリング結果を見てみます。

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="ja" ng-app="app">
<head>
  <meta charset="UTF-8">
  <title>Format test</title>
</head>
<body>
  <div ng-controller="FormatCtrl">
    <h1>日付</h1>
    <p>{{today}}</p>
    <p>{{today | date: 'fullDate'}}</p>

    <h1>通貨</h1>
    <p>{{yen}}</p>
    <p>{{yen | currency}}</p>
  </div>

  <!-- bower:js -->
  <script src="bower_components/jquery/dist/jquery.js"></script>
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-i18n/angular-locale_ja-jp.js"></script>
  <!-- endbower -->

  <script src="scripts/main.js"></script>
</body>
</html>
main.js
1
2
3
4
5
6
(function() { 'use strict';
  angular.module('app', []).controller('FormatCtrl', ['$scope', function($scope) {
    $scope.today = new Date();
    $scope.yen = 1000000;
  }]);
})();

結果

日付

“2014-09-15T11:38:50.158Z”

2014年9月15日月曜日

通貨

1000000

\1,000,000

きちんと日本語の表記にフォーマットされていますね。