Angular stateParams without url

Question

I want to navigate from one url /projects to url /projects/{name} , but I need to resolve resource by $stateParams.id. How can I do it?

Now I have something like this:

$stateProvider.state('project.detail', {
...
url: '/projekt/{name}/{id}',
...
resolve: {
            project: ['$stateParams', 'ProjectService', function($stateParams, ProjectService) {
                return ProjectService.get({id : $stateParams.id}).$promise;
            }]
        }
...;

But when I remove {id} from the url: '...', it does not work.

My front end navigation is :

ui-sref="project.detail({name: project.name, id: project.id})"

And I do not want to have url .../projects/hyperloop/5462

but only .../projects/hyperloop

Thank you!

Just to make things clear, event though you want to go to /projects/name, you still want to get the id somehow? — Emin Laletovic
– Emin Laletovic, Commented Mar 17, 2017 at 16:35

Bartek Fryzowicz · Accepted Answer · 2017-03-17 16:41:44Z

1

You can use parameters without specifying them in state URLs. You can specify them in params property in state config:

$stateProvider.state('project.detail', {
    ...
    url: '/projekt/{name}',
    params: {
      id: null
    },
    resolve: {
            project: ['$stateParams', 'ProjectService', function($stateParams, ProjectService) {
                return ProjectService.get({id : $stateParams.id}).$promise;
            }]
     }
    ...
})

Please check ui-router docs for more details

edited Mar 17, 2017 at 16:41

answered Mar 17, 2017 at 16:35

Bartek Fryzowicz

6,70420 silver badges29 bronze badges

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

1 Comment

Daniel Perník Over a year ago

I thought that setting id to null will overwrite my value from view, but it does not. Thank you!

Collectives™ on Stack Overflow

Angular stateParams without url

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related