How to see what states are configured in AngularJS / UI-Router?

Question

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?

Answer 1

$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?

Answer 2

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']

Answer 3

This code solved my problem

$stateProvider['stateRegistry'].states['your.previously.defined.router.state'].self;