前回ngRoute使いましたが、よくよく調べるとangular-ui-routerの方が多機能なようです。
こちらを使ってみましょう!
bower install angular-ui-router --save
でインストール完了!
<script src="/vendors/angular-ui-router/release/angular-ui-router.min.js></script>
インクルード!あとはマニュアル通りに使いますー。
var app = angular.module('<app名>', ['ui.router']);
app.config(function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/index');
$stateProvider
.state('index', {
url: '/',
templateUrl: '/templates/dashboard.html'
})
.state('test', {
url: '/test',
templateUrl: '/templates/test.html'
});
.state('test.item', {
url: '/:id',
templateUrl: '/templates/test.item.html',
controller: 'TestItemController'
});
});
テンプレートが入る場所はng-viewではなく、ui-viewになりますー。
<div ui-view></div>
コントローラはこんな感じ
app.controller('TestItemController', function($scope, $stateParams) {
// URL引数の取得: $stateParams.id
}
リンクするときはui-sref=”状態名”でも可能です。
もちろん今まで通りhrefでも大丈夫です!
引数の指定も簡単☆
<a ui-sref="test"></a>
<a ui-sref="test.get({id:0})"></a>
angular-ui-routerの何が便利かというと、状態に階層を設け、ページの一部分を書き換えることができます。
上記、例の場合。test→itemといった構造になっています。そのため、test.htmlのui-viewがtest.item.htmlに更新されます。
時間が無くなったので今回はこの辺で!