UI-Router 0.2.11 optional params
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.js"></script>
<ul class="list-inline nav">
<li ui-sref="base.home">Home</li>
<li ui-sref="base.media">Media</li>
</ul>
<div id="view-base">
<h1>{{ $root.$state.current.name }}</h1>
<ul>
<li ng-repeat="($key, param) in $root.$stateParams"><em>{{ $key }}</em>: {{ param }}</li>
</ul>
</div>
CSS
body {
font-family: Georgia;
font-size: 14px;
line-height: 1.4;
margin: 1em;
}
h1 {
font-weight: bold;
margin-bottom: 0.2em;
}
em {
color: #333;
font-style: italic;
}
.list-inline {
display: flex;
}
.list-inline li {
flex-grow: 1;
text-align: center;
}
.list-inline li:first-child {
text-align: left;
}
.list-inline li:last-child {
text-align: right;
}
.nav li {
cursor: pointer;
}
.nav li:hover {
color: green;
}
#view-base {
background-color: #eee;
padding: 1em;
}
JavaScript
var app = angular.module('MyApp', ['ui.router']);
app.config([
'$stateProvider',
function appConfig( $stateProvider ) {
$stateProvider
.state('base', {
abstract: true,
params: {
locale: { value: 'en-us' }
},
url: '/:locale'
})
.state('base.home', {
params: {
locale: { value: 'en-us' }
},
url: '^',
})
.state('base.media', {
params: {
item: { value: 1 },
locale: { value: 'en-us' }
},
url: '/media/:item',
});
}
]);
app.run([
'$rootScope','$state','$stateParams',
function appRun($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}
]);
/**
* State-based routing for AngularJS
* @version v0.2.11
* @link http://angular-ui.github.com/
* @license MIT License, http://www.opensource.org/licenses/MIT
*/
"undefined"!=typeof module&&"undefined"!=typeof exports&&module.exports===exports&&(module.exports="ui.router"),function(a,b,c){"use strict";function d(a,b){return J(new(J(function(){},{prototype:a})),b)}function e(a){return I(arguments,function(b){b!==a&&I(b,function(b,c){a.hasOwnProperty(c)||(a[c]=b)})}),a}function f(a,b){var c=[];for(var d in a.path){if(a.path[d]!==b.path[d])break;c.push(a.path[d])}return c}function g(a){if(Object.keys)return Object.keys(a);var c=[];return b.forEach(a,function(a,b){c.push(b)}),c}function h(a,b){if(Array.prototype.indexOf)return a.indexOf(b,Number(arguments[2])||0);var c=a.length>>>0,d=Number(arguments[2])||0;for(d=0>d?Math.ceil(d):Math.floor(d),0>d&&(d+=c);c>d;d++)if(d in a&&a[d]===b)return d;return-1}function i(a,b,c,d){var e,i=f(c,d),j={},k=[];for(var l in i)if(i[l].params&&(e=g(i[l].params),e.length))for(var m in e)h(k,e[m])>=0||(k.push(e[m]),j[e[m]]=a[e[m]]);return J({},j,b)}function...