<!DOCTYPE html>
<html ng-app="MyApp" ng-strict-di>
<head>
<title>my app</title>
<style>ul { padding-left: 0; } li { list-style: none; }</style>
<script data-require="angular.js@*" data-semver="1.3.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
<script data-require="ui-router@*" data-semver="0.2.13" src="//rawgit.com/angular-ui/ui-router/0.2.13/release/angular-ui-router.js"></script>
<script>
document.write('<base href="'+ document.location.pathname +'" />')
</script>
<script src="script.js"></script>
</head>
<body>
<ul>
<li><a ui-sref="home({veryLongParamHome:'Home--f8d218ae-d998-4aa4-94ee-f27144a21238'})">home</a>
<li><a ui-sref="parent({
veryLongParamParent:'Parent--2852f22c-dc85-41af-9064-d365bc4fc822'
})">parent</a>
<li><a ui-sref="parent.child({
veryLongParamParent:'Parent--0b2a585f-fcef-4462-b656-544e4575fca5',
veryLongParamChild:'Child--f8d218ae-d998-4aa4-94ee-f27144a61238'
})">parent.child</a>
</ul>
<div ui-view=""></div>
<script type="text/ng-template" id="tpl.html">
<div ui-view>
<h3>current state name: <var>{{$state.current.name}}</var></h3>
<h5>params</h5>
<pre>{{$stateParams | json}}</pre>
<h5>state</h5>
<pre>{{$state.current | json}}</pre>
</div>
</script>
</body>
</html>
var app = angular
.module('MyApp', [
'ui.router'
])
.config(['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
// States
$stateProvider
.state('home', {
url: "/home",
templateUrl: 'tpl.html',
params : { veryLongParamHome: null, },
})
.state('parent', {
url: "/parent",
templateUrl: 'tpl.html',
params : { veryLongParamParent: null, },
})
.state('parent.child', {
url: "/child",
templateUrl: 'tpl.html',
params : { veryLongParamChild: null, },
controller: 'ChildCtrl',
})
;
}
])
.controller('ChildCtrl', ['$scope', function ($scope) {
}])
.run(['$rootScope', '$state', '$stateParams',
function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}])