AngularJSでURL内のパラメタから値を読み取る方法(ng-view, templateUrlなしで！)
ちまたで話題の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って便利ですね！