How to see what states are configured in AngularJS / UI-Router?
Is there a way to see all of the states that have been set on $stateProvider
?
In this case, I would like my state assignments to be distributed across many files. I would like to inspect the built states on run
or config
in a different file.
For example:
# component1.coffee
angular.module('zoo').config ($stateProvider) ->
$stateProvider.state 'component1',
url: '/component1'
template: _template
controller: 'Component1Ctrl'
# component2.coffee
angular.module('zoo').config ($stateProvider) ->
$stateProvider.state 'component2',
url: '/component2'
template: _template
controller: 'Component2Ctrl'
# componentNavigation.coffee
angular.module('zoo').run ($state) ->
console.log 'All configured states:', $state.configuredStates # doesn't exist.
Is there something that will list out the two states, component1
and component2
?
$state.get()
returns an array of all states. Includes the top-level abstract state, but you can filter that out if you want.
How to enumerate registered states in ui-router?
For people who try to get actual URL routes including properly displayed nested states:
$state.get().map(function(state) { return $state.href(state.name) })
// => ['/login', '/home', '/something']