<!DOCTYPE html>
<html ng-app="relativeApp">
<head>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="ui-router@*" data-semver="0.2.8" src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
Outside of the <b>planManager</b>, absolute routing
<ul>
<!--<li><a ui-sref="myApp">myApp</a></li>-->
<li><a ui-sref="myApp.planManager({state:'a'})"><code>myApp.planManager({state:'a'})</code></a></li>
<li><a ui-sref="myApp.planManager({state:'b'})"><code>myApp.planManager({state:'b'})</code></a></li>
<li><a ui-sref="myApp.planManager({state:'c'})"><code>myApp.planManager({state:'c'})</code></a></li>
</ul>
<div ui-view="main"></div>
<div ui-view=""></div>
</body>
</html>
'use strict';
var myApp = angular.module('relativeApp', [
'ui.router'
])
.config(['$stateProvider',
function($stateProvider) {
$stateProvider.state('myApp', {
url: '/myApp',
templateUrl: 'myApp.tpl.html',
});
$stateProvider.state('myApp.planManager', {
url: '/planManager/:state',
views: {
"main": {
controller: 'planManagerControl',
templateUrl: 'planManager.tpl.html',
}
},
data: {
pageTitle: 'Plan Manager'
}
});
}
])
.controller('planManagerControl', function($scope, $stateParams) {
$scope.state = $stateParams.state;
})
.config(['$urlRouterProvider',
function($urlRouterProvider) {
$urlRouterProvider.otherwise('/myApp/planManager/a');
}
]);
/* Styles go here */
<div>
The <b>planManager</b> state, can use relative for siblings
<ul>
<li><a ui-sref=".({state:'a'})"><code>.({state:'a'})</code></a></li>
<li><a ui-sref=".({state:'b'})"><code>.({state:'b'})</code></a></li>
<li><a ui-sref=".({state:'c'})"><code>.({state:'c'})</code></a></li>
</ul>
<hr />
<div>The state: {{state}}</div>
</div>
<div>
The <b>myApp</b> state, can use relative for children
<ul>
<li><a ui-sref=".planManager({state:'a'})"><code>.planManager({state:'a'})</code></a></li>
<li><a ui-sref=".planManager({state:'b'})"><code>.planManager({state:'b'})</code></a></li>
<li><a ui-sref=".planManager({state:'c'})"><code>.planManager({state:'c'})</code></a></li>
</ul>
<hr />
<div ui-view="main"></div>
</div>