AngularJS で Underscore.js を使ってみた

JavaScript Angular

AngularJS にユーティリティ関数あるにはあるけど、配列やオブジェクトを操作する関数が足りないので、 Underscore.js を使うことにした。

AngularJS らしく依存性注入したいから、Underscope.js を AngularJS モジュール化している。

<!DOCTYPE html>
<html ng-app="UnderscoreSample">
  <head>
    <meta charset="utf-8">
    <title>UnderscoreSample</title>
  </head>
  <body ng-controller="MainCtrl">
    <ul>
      <li ng-repeat="value in values" ng-bind="value"></li>
    </ul>

    <script src="underscore.js"></script>
    <script src="angular.js"></script>
    <script>
      // underscore をモジュール化
      angular.module("underscore", []).factory("_", function() {
          return _;
      });

      var app = angular.module("UnderscoreSample", ["underscore"]);

      // モジュール化した Underscore を使っていることがわかるように、$_ にしておく。
      // 実際は _ で使っている。
      app.controller("MainCtrl", ["$scope", "_", function($scope, $_) {
          var src = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

          // 偶数だけを表示する
          $scope.values = $_.filter(src, function(n) {
            return n % 2 === 0;
          });
      }]);
    </script>
  </body>
</html>

余談だけど、angular-underscore というライブラリがある。

こいつはフィルタも提供してくれるんだけど、フィルタは今のところ必要としていないのと、 $rootScope に Underscore の関数を生やすのが個人的に気に入らないので、導入は見送った。