ちまたで話題のAngularJSですが、URLのパラメタに関する部分で詰まったので書いてみます。

前提

ここでいうURLのパラメタとは例えば、“http://example.com/#/2014/02”というURLで2014や02の部分ことです。これをJavaScript内で値として使いたい！というケースを想定しています。

“http://example.com/#/?message=hello”など?に続く文字列、query stringも同様です。これも含めてここではパラメタと呼ぶことにします。

パラメタは$routeParamsを使う

URLのパラメタをどのように取得すればよいのか。これについては少し検索するといくつか情報が出てきます。

例えば公式のAPIは以下のようになっています。

AngularJS Documentation for $routeParams

残念ながらTutorialではないので、十分なサンプルコードが得られません。初心者には少し厳しいです・・。

良いサンプルは無いかと検索すると以下が見つかります。このサイトはお勧めです。AngularJS界隈でこの人のサンプルは重宝されているようです。

AngularJS - $routeParams | Thinkster

自分で書いてみる(ng-view, templateUrlありバージョン)

先人達の知恵を借りて自分でもコードを書いてみます。単純にURLに/2014/02というようなパラメタを与えたとき、“2014年 02月”というように表示するコードを書いてみます。

http://plnkr.co/edit/7oaZtlGHpcKLsWLyHZjk?p=preview

コードは上記のPlunkerからご覧ください。Linkを叩いて…/#/2014/02にアクセスするか、Plunkerのプレビューを別窓で開いてURLに好きな文字列”/#/年/月”を入力してください。

ポイントは以下です。

• angular-route.jsを利用する
• angular.module(“app”, [“ngRoute”])と記述し、ngRouteモジュールを利用する
• $routeProviderでパラメタをマッピングする

この方式だとtemplateUrlとng-view(またはng-include)を利用することが必要です。別に分割しなくていいので、index.htmlだけで何とかさせてくれー！と散々悩まされました。

自分で書いてみる(ng-view, templateUrlなしバージョン)

ほとんどangular-seedというAngularJSプロジェクトテンプレートのサンプルに助けられました。

http://plnkr.co/edit/D3dYj6fBt8NmvK8nJbkj?p=preview

このサンプルではng-viewもtemplateUrlも利用していません。template.htmlも存在しません。

上記のようにすればそれらなしで機能を実現することができます。runや$routeScopeのonが重要なんだと思いますが、まだこのあたりは調べられていないです。

どなたかの助けになれば幸いです。

ところでPlunkerって便利ですね！