AngularJS x UI-RouterでpushStateを使う
何も考えずにAngularJSを使うと、遷移のURLはハッシュフラグメント(#)を使うことになる。
しかし、ngRouterの$locationProviderにはhtml5Modeという機能があり、こいつを有効にすると、pushStateを使ってURLを構築することができる。
それをUI-Routerで使うよという話。
UI-Routerも$locationProviderをそのまま利用可能
ほんとうにまんま一緒に有効化できる。
ngRouterの場合:
angular.module("myApp").config(["$locationProvider", function ($locationProvider) { $locationProvider.html5Mode(true); }]);
UI-Routerの場合:
angular.module("myApp").config(["$locationProvider", function ($locationProvider) { $locationProvider.htmlMode(true); }]);
ui-srefの扱い
UI-Routerを使っていて感動したのは、ui-srefの扱い。
ui-srefはstateを指定し、そのstateで定義したURLをhrefの属性に変換してくれるDirectiveですが、html5Modeを有効にすると、ハッシュ(#)を取り除いてくれる。
つまり、URLの差し替えとかせずにhtml5Modeに移行できる。 なので、UI-Routerを使っているなら、hrefよりもui-srefを使ったほうが可用性が高いです。
grunt-contrib-connectと併せて使いたい
変更を最小限にhtml5Modeを利用できるのは素晴らしいが、pushStateを使う以上は当然、サーバ側にも手を入れなければならない。
基本的には/のアクセスは/index.htmlにリライトされているだけなので、/hogeとかのURLを（内部の遷移ではなく）叩いてしまうと、当然Not Foundになる。
わざわざテンプレートをRouterにまかせて管理しているのに、同じようなHTMLを大量に生産するのも無駄過ぎるし、一般的なプロラマなら違う方法があると考える。
connect-rewrite
grunt-pluginではないが、URLに対して特定コンテンツを返す様に設定できるnode-connectのプラグインがある。これをgrunt-contrib-connectのmiddlewareとして利用してやればいい。
/api, /css, /js, /tmpl, /fonts, /imgのHTTP-PATHを除くリクエストをすべて/index.htmlへリライトしたい場合は以下の様に書く。
connect: { server: { options: { host: "localhost", port: 8000, base: "www", middleware: function (connect, options) { if (!Array.isArray(options.base)) options.base =[options.base]; directory = options.directory || options.base[options.base.length - 1]; // node-moduleを読み込み modRewrite = require("connect-modrewrite"); middlewares = []; middlewares.push(connect.directory(directory)); // modRewriteの設定 middlewares.push(modRewrite([["!/api|/css|/js|/tmpl|/fonts|/img /index.html"]); } } } }
備忘録
pushState対応してて気づいた余談。
RouterのtemplateUrlは絶対パスで記述しよう
相対パスで指定してて、/hogeなURLでアクセスした時にテンプレートが404になって困った。
templateUrlとしてはhttp://localhost:8000/tmpl/fuga.htmlを期待してても、相対パスで書かれていると、/hogeから/fugaに遷移しようとしたときに読みに行くURLはhttp://localhost:8000/hoge/tmpl/fuga.htmlになる。
WEB屋としてはあまりに当たり前なコトなのだけど、サンプルで書かれてた相対パスをそのまま使っていた。まあ、ハッシュフラグメントでやっている限りは困らないけど。
URLの指定にHashfragment(#)ではなくHashbang(#!)を使いたい
$locationProvider.hashPrefix('!');ってすれば、#!になる。
Angular UI-Routerのviewsの定義を確認してみた
state.viewsの指定方法を理解してなかったので調べた。
基本
viewの名前はビュー名とステート名を@で結合したviewName@stateNameで構成される。
無名のview
ui-viewは名前を与えず無名のviewとして定義ができる。
<div ui-view></div>
その場合、stateは""でviewを指定する
$stateProvider .state("example", { views: { "": "example.html" } });
viewのstateを省略した場合
viewsの定義文字列は@でビュー名とステート名を区切る。
ビュー名に@が含まれていない場合、ビュー名の末尾に@と親ステートの名前^1を結合してview名する。
$stateProvider .state("example", { views: { "main": { templateUrl: "example.html" } }) .state("example.child", { views: { "main": { templateUrl: "example.child.html" } } });
このようなstatesを定義した場合、viewsは以下に変換される
views: {
"main@": {
templateUrl: "example.html"
}
}
views: {
"main@example": {
templaetUrl: "example.child.html"
}
}
viewsを省略した場合
viewsは省略することができる。
$stateProvider.state("example", {templateUrl: "example.html"});
上記の場合、viewsの指定は以下に変換される。
views: { "@": { templateUrl: "example.html" } }
rootステートについて
親要素を$stateProviderに定義しないステートもrootという親をもっている。
root = registerState({
name: '',
url: '^',
views: null,
'abstract': true
});
これによって、例えば@だけをviewsに指定した場合は最上位に定義されている無名のui-viewを指定したことになる。
AngularJS x UI-Routerの使い方
UI-Routerはとても強力で、ngRouterよりも多くの事ができるのでとても便利。 しかし、強力すぎてRouterの概念自体を塗り替えてしまっていてなかなかピンと来てなかったのでまとめてみる。
リストページと詳細ページを別々のページとして用意する
state-router.js
app.config(["$stateProvider", function ($stateProvider) { $stateProvider .state("list", { "url": "^/list", "templateUrl": "list.html", "controller": "ListCtrl" }) .state("detail", { "url": "^/detail/:detail_id", "templateUrl": "detail.html", "controller": "DetailCtrl" }) ; }])
index.html
<div ui-view></div>
list.html
<ul ng-repeat="content in contents"> <li><a href="#/detail/{{content.id}}">{{content.title}}</a></li> </ul>
detail.html
<dl> <dt>ID</dt> <dd>{{detail.id}}</dd> <dt>Title</dt> <dd>{{detail.title}}</dd> </dl>
リストと詳細がひとつのページの中にある
2カラムレイアウトでlistとdeitalを同じページの中に内包する。
state-router.js
app.config(["$stateProvider", function ($stateProvider) { $stateProvider .state("contents", { "templateUrl": "contents.html", "controller": "ContentsCtrl" }) .state("contents.detail", { "views": { "detail@contents": { "templateUrl": "detail.html", "controller": "DetailCtrl" } } }) ; }])
index.html
<div ui-view></div>
list.html
<nav class="left-column"> <ul ng-repeat="content in contents"> <li><a ui-sref="contents.detail({id: content.id})">{{content.title}}</a></li> </ul> </nav> <div class="right-column" ng-view="detail">
detail.html
<dl> <dt>ID</dt> <dd>{{detail.id}}</dd> <dt>Title</dt> <dd>{{detail.title}}</dd> </dl>
2カラムレイアウトでdetailをURLで指定できるようにする
/contentでリストとindexを、/content/{detail_id}で指定したdetailを表示できるようにする。
state-router.js
app.config(["$stateProvider", function ($stateProvider) { $stateProvider .state("contents", { "url": "^/content", "templateUrl": "contents.html", "controller": "ContentsCtrl" }) .state("contents.detail", { "url": "/:id" "views": { "detail@contents": { "templateUrl": "detail.html", "controller": "DetailCtrl" } } }) ; }])
まとめ
- stateは継承が可能
.で連結することで、親.子というstateを定義できる
- viewsに
ビュー@ステートを指定すると、親ステートで定義したui-viewにtemplateを埋め込むことができる - stateをネストした場合、URLは親のURLに追加される形で指定できる
^からURLを開始する(^/content/:detailというように）ことで相対ではなく絶対パスで指定できる
hrefの代わりに、ui-sref属性を用いることで、URLではなくstateをリンクに指定できる。ui-srefを利用するばあい、$stateProviderに定義されてないstateを指定するとリンクにならない
UI-Routerの理解に一日費やしたので、とりあえず僕の理解の範囲をまとめた。 ややこしいけど大変便利！
