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.

||||||
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',
...
||||||
  • 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"?. – Scott Sword Jan 28 '16 at 17:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.