Angularの$routeProviderで汎用的なルート設定をするには

  • 投稿日:
  • by

突然ですが、angular.jsで$routeProviderを使うとき、次のように書くと思います。

angular.module('MyModule', []).config(function($routeProvider) {
  $routeProvider.when('/foo', {
    templateUrl: 'foo.html'
  }).
  when('/bar', {
    templateUrl: 'bar.html'
  });
});

ところで、2つならいいですが場合よっては多いこともあると思います。 そこで汎用的なルートを書いてファイルを置けばそのルートが使えるようにしたいと思います。もちろんファイルがないときはエラーになります。

ドキュメントを参照すると、

http://docs.angularjs.org/api/ngRoute.$routeProvider

正規表現は使えないのですが、named groupは使えます。つまり、

when('/:name', {

のように書くことができます。さてこの場合、 $routeParams.nameで実際の値にアクセスできるのですが、 $routeParamsはルートが切り替わるまで使えません。 つまり、moduleのconfigでは使えないのです。

検索したところ、これを見つけました。

http://stackoverflow.com/questions/11534710/angularjs-how-to-use-routeparams-in-generating-the-templateurl

ところで、常々思うのですが、stackoverflowを参照するときは注意する必要があります。回答を鵜呑みにしてはいけません。

今回のケースでは、現時点では1番初めの回答は、「できない」というものです。この回答が最もvoteされ、acceptもされています。 しかし、現時点での2番目の回答を見ると、angular-1.1.3以降では「できる」となっています。

まあ、このケースはそれほどひどくはなくて、おそらく質問時点では、できなかったのでしょう。

というわけで、現時点のangular-1.2では下記でできます。

angular.module('MyModule', []).config(function($routeProvider) {
  $routeProvider.when('/:name', {
    templateUrl: function(params) {
      return params.name + '.html';
    }
  });
});

ついでにcontrollerもnameを使って動的に設定できたらよいと思うのですが、それはまたの機会にでも調べることにします。