Angular ui-router: accessing $stateParams on reload

Question

In my Angular app, I have this route structure:

.state('mapping', {
    url: '/mapping',
    templateUrl: 'app/components/mapping/mapping.html',
    controller: 'MapCtrl as map',
    abstract: true,
    authenticate: true
})
.state('mapping.all', {
    url: '',
    templateUrl: 'app/components/mapping/partials/all.html',
    authenticate: true
})
.state('mapping.project', {
    url: '/:projectName',
    controller: 'ProjectCtrl as proj',
    templateUrl: 'app/components/mapping/partials/project.html',
    authenticate: true
})

The intended functionality is that when a user access 'mapping.project' the application will load all relevant information relative to that project using a projectID variable which is passed (invisibly) through $stateParams using ui-sref:

ui-sref="mapping.project({projectId: project.id, projectName: project.name})"

However this results in an unwanted behavior: when a user reloads the page when already on the 'mapping.project' state, nothing will be loaded because no $stateParams were effectively passed.

What would be the best way to get projectId on reload (and make sure my controller gets initiated again) without showing it on the URL?

Community · Accepted Answer · 2017-05-23 11:44:48Z

1

In this case, if we want our params to survive a page reload (or open in a new tab/window) they simply must be part of the URL. So the way to do this is to extend the URL definition with projectId:

.state('mapping.project', {
    url: '/:projectName?projectId',
    ...
})

that will add that projectId as "query string param". Another option is params nesting

.state('mapping.project', {
    url: '/:projectName/:projectId',
    ...
})

Check also this: How to pass parameters using ui-sref in ui-router to controller

edited May 23, 2017 at 11:44

CommunityBot

11 silver badge

answered Oct 11, 2015 at 11:51

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tiago Over a year ago

I did not know that, I thought passing $stateParams invisibly would work as intended. Thank you!

Radim Köhler Over a year ago

It simply could not, because it is passing parameters via Javascript inside of our SPA. Reload or open in a new window === just url parts remain

Collectives™ on Stack Overflow

Angular ui-router: accessing $stateParams on reload

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related