概要
AngularJSのngRouterの代替用のモジュール。
複数のviewを持てるようになっている。
準備
AngularJSの開発環境を整える
こちらを参考にセットアップする。
UI-Routerを組み込む
$ bower install angular-ui-router --save
使ってみる
テンプレート
<div ui-view="view1"></div>
<div ui-view="view2"></div>
モジュールの登録
angular.module('myApp', ['ui.router']);
ルーティング設定
angular.module('myApp')
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('state1', {
url: '/state1',
views: {
'view1': {
templateUrl: 'views/test1.html'
},
'view2': {
templateUrl: 'views/test2.html'
}
}
})
.state('state2', {
url: '/state2',
views: {
'view1': {
templateUrl: 'views/test2.html',
controller: 'Test2Ctrl'
},
'view2': {
templateUrl: 'views/test1.html',
controller: 'Test1Ctrl'
}
}
});
$urlRouterProvider.otherwise('/state1');
}]);
遷移
angular.module('myApp')
.controller('myCtrl', function($scope, $state) {
$state.go('state1');
});