CODEWITHSUNDEEP
angularjsangular-ui-router
huan feng
huan feng

Reputation: 8623

Angular ui-router dynamic params double slash

I have ui-router's config like below:

.state('xxx.components',{
            url: '/:runId/component',
            reloadOnSearch: false,
            templateUrl: '/modules/xxx//views/cloud-components/templates/cloud-components.tpl.html',
            controller: 'CloudComponentsCtrl',
            controllerAs: 'ctrl'
        })

if i go to the component page without any runId, the url will look like below:

http://localhost:3031/xxx/run-topologies//component

It will contain double slash in the url, i want it only contains one slash like below, what should i do can solve this issue?

expect behavior:

with runId: (This is correct due to current config)

http://localhost:3031/xxx/run-topologies/6/component

without runId: (should be only 1 slash)

http://localhost:3031/xxx/run-topologies/component

Upvotes: 0

Views: 557

Answers (1)

Lizzy
Lizzy

Reputation: 2163

What you are asking is not possible AFAIK. But, there are two ways that you might be interested in which will use the CloudComponentsCtrl for both routes.

  1. Define a separate state with a url without runId

    .state('xxx.components',{
    url: '/component',
    reloadOnSearch: false,
    templateUrl: '/modules/xxx/views/cloud-components/templates/cloud-components.tpl.html',
    controller: 'CloudComponentsCtrl',
    controllerAs: 'ctrl'
})
.state('xxx.componentsForRunId',{
    url: '/:runId/component',
    reloadOnSearch: false,
    templateUrl: '/modules/xxx/views/cloud-components/templates/cloud-components.tpl.html',
    controller: 'CloudComponentsCtrl',
    controllerAs: 'ctrl'
})

  2. Remove runId from the route and include it as a query parameter.

    .state('xxx.components',{
    url: '/component?runId',
    reloadOnSearch: false,
    templateUrl: '/modules/xxx/views/cloud-components/templates/cloud-components.tpl.html',
    controller: 'CloudComponentsCtrl',
    controllerAs: 'ctrl'
})

    Then you can access runId in from your $stateParams.

Hope this addresses your problem in some way.

Upvotes: 2

Related Questions