A helper module for AngularUI Router, which allows you to define your states as an object tree.
bower install angular-ui-router.stateHelper
- Reference
stateHelper.min.js
. - Add a dependency on
ui.router.stateHelper
in your app module.
angular.module('myApp', [ 'ui.router', 'ui.router.stateHelper' ])
.config(function(stateHelperProvider){
stateHelperProvider
.state({
name: 'root',
templateUrl: 'root.html',
children: [
{
name: 'contacts',
templateUrl: 'contacts.html',
children: [
{
name: 'list',
templateUrl: 'contacts.list.html'
}
]
},
{
name: 'products',
templateUrl: 'products.html',
children: [
{
name: 'list',
templateUrl: 'products.list.html'
}
]
}
]
})
.state({
name: 'rootSibling',
templateUrl: 'rootSibling.html'
});
});
By default, all state names are converted to use ui-router's dot notation (e.g. parentStateName.childStateName
).
This can be disabled by calling .state()
with an optional second parameter of true
.
For example:
angular.module('myApp', ['ui.router', 'ui.router.stateHelper'])
.config(function(stateHelperProvider){
stateHelperProvider.state({
name: 'root',
templateUrl: 'root.html',
children: [
{
name: 'contacts',
templateUrl: 'contacts.html'
}
]
}, true);
});
Before 1.2.0 .setNestedState
was used instead of .state
. In 1.2.0 setNestedState
was deprecated in favour of .state
, and chaining was added. This makes it easier to switch between $stateProvider
and stateHelperProvider
.