Populate route params with resolved data in angular ui-route

85 Views Asked by At

Give the following code:

$stateProvider
      .state('app.users', {
        abstract: true,
        url: '/users',
        templateUrl: 'views/users.html',
        resolve: {
          userId: Users => Users.lastUserSelected()
        },
      })
      .state('app.users.questions', {
        url: '/:userId/questions',
        templateUrl: 'views/questions.html',
        controller: 'UsersQuestionsCtrl',
        resolve: {
          questions: (userId) => Questions.getAll(userId)
        }
      })

When I transit to the app.users.questions state, everything goes ok, but the URL in the browser ends up being like mydomain.com/users//questions (notice the double forward slash // in the route, there's no userId)

Seems like the user ID resolved from the parent state is not populated in child route, or something alike. I think I'm missing a key concept here.

I would like to achieve a URL like mydomain.com/users/USERID/questions.

I've been through many ui-router guides but couldn't figure this out, any help is really appreciated.

I'm populating my sideBar menu using the addMenuItem and addMenuSubItem methods from the MEANJS project.

Menus.addMenuItem('sidebar', {
            state: 'app.users',
            type: 'dropdown',
            iconClass: 'fa fa-comments',
            position: 4,
            roles: ['*']
        });

Menus.addSubMenuItem('sidebar', 'app.users', {
            state: 'app.user-questions'
        });

Notes:

1- It doesn't matter the previous state, wherever state I come from... it's not related at all to the user, so passing the :userId from all the possible previous states sounds wrong to me. I'm just using USERS and QUESTIONS as an example here but those are not the entities i'm working with in my actual project.

2 - Im using MEANJS seed project

0

There are 0 best solutions below