0

Problem:

When I navigate to #/ it tries to load the profile state which is at #/:userId.

So I'm completely perplexed by this functionality as it is seemingly intermittent. I already referred to this question and it seems that shuffling the order has no affect.

I want to have clean routes with UI-Router:

#/ This is the user's root dashboard

#/123 This is a specific user profile

#/my/preferences This is some other route.

  $stateProvider
    .state('profile', {
      abstract: true,
      url: '/:userId',
      templateUrl: 'profile-user.html',
      controller: 'ProfileController',
      controllerAs: 'vm',
      reloadOnSearch: false,
      resolve: {
        data: function() {
          // some promises stuff
        }
      }
    })
    .state('profile.activity', {
      url: '',
      templateUrl: 'activity.html'
    })
    .state('dashboard', {
      url: '/',
      templateUrl: 'dashboard.html',
      controller: 'DashboardController',
      controllerAs: 'vm',
      reloadOnSearch: false,
      resolve: {
        data: function() {
          // some promises stuff
        }
      }
    })
    .state('preferences', {
      url: '/my/preferences',
      templateUrl: 'preferences.html',
      controller: 'PreferencesController',
      controllerAs: 'vm',
      reloadOnSearch: false,
      resolve: {
        data: function() {
          // some promises stuff
        }
      }
    })

Question:

Is there a way to have #/, #/:param and #/someRoute/:someId be different states in UI-Router? Also, is there a way to see what routes are registered and in what order in UI-Router? That would be tremendously helpful during debugging.

Community
  • 1
  • 1
Scott Sword
  • 4,648
  • 6
  • 32
  • 37

1 Answers1

0

The order is essential when UI-Router tries to resolve states. So define more specific state should be defined sooner then generic states:

// the specific will be checked first
.state('dashboard', {
  url: '/',
... 
.state('preferences', {
  url: '/my/preferences',
...
// these will be used if above not matched
.state('profile', {
  abstract: true,
  url: '/:userId',
...
Radim Köhler
  • 122,561
  • 47
  • 239
  • 335
  • So that's what I understand, but here is the real bizarre occurrence. After defining my states in that order it works intermittently. I have another state after profile, we'll call it `food` where you navigate to it by `#/food/:foodId`. When I add another sub state/route to `food` it breaks my dashboard route and causes the dashboard route to load the profile state. – Scott Sword Jan 28 '16 at 16:28
  • I can name the subview for `food` anything, but it seems that by adding one more sub view to the `food` state causes strange behavior with the `#/` route. – Scott Sword Jan 28 '16 at 16:30
  • The logic is really very simple. Really. Just define the states in the right order, because UI-Router iterates them as they were registered. The first MATCH it finds... that state is used. There is not so magic about that. I am trying to say... define `/food` very soon.. almost the first.. because it is unique name right? Please, really do not try to find some challenge.. just try to organize state definition from the most specific to generic - it will work then by design – Radim Köhler Jan 28 '16 at 16:33
  • First of all, thanks for the help, I appreciate the information. If the logic really is simple and it is simply iterating over the collection of defined routes, then how come if I request the route which is specifically defined first it attempts to load a subsequent route that was defined down the chain? – Scott Sword Jan 28 '16 at 16:55
  • Also, if order is essential then why do they say ["You can register states in any order and across modules"](https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views#registering-states-order)?. – Scott Sword Jan 28 '16 at 17:36
  • Check this, I created also plunker there http://stackoverflow.com/q/34326152/1679310 – Radim Köhler Jan 28 '16 at 17:40
  • I tried to repro it in your plunker, but couldn't. I have all my routes w/ their respective modules, but I pulled them all into the main config block to test ui-router registration order. Here is the gist https://gist.github.com/scottsword/32ec9888fea7dae67dc9 What is happening is when a add another sub view to either the `profileUser` state or the `jobDetail` state ui-router starts trying to load the `profileUser` when I navigate to `#/`. – Scott Sword Jan 28 '16 at 18:46
  • If you want, I could help you to fix a plunker which you will create to reproduce the error... if that could help... – Radim Köhler Jan 28 '16 at 18:47
  • Thanks for the help, but unfortunately I don't have time right now to rebuild everything in plunker to properly reproduce this. Over the weekend I will see if I can pin point what the issue is and if I come up with anything I will come back here for posterity. – Scott Sword Jan 28 '16 at 20:32