How to make last slash optional in angular ui router?

Question

I have two states like this:

    $stateProvider.state('app', {
        url: '/app',
        template: '<app-index></app-index>',
        data: {},
        resolve: {}
    });
    $stateProvider.state('app.list', {
        url: '/list/:type?',
        template: '<app-list></app-list>',
        data: {},
        resolve: {}
    })

it work fine but when I type url /app/list it redirect to home page, how can I make slash optional? I've tried to put this url '/list/?:type?' but that didn't work. Should I add redirect, if yes then how?

On a side note I highly approve of your use of the template to load self contained directives instead of specifying the controller and in templateURL for the route. IMHO it makes for much cleaner and more manageable routes. — Enzey
– Enzey, Commented Oct 4, 2016 at 14:45

Enzey · Accepted Answer · 2016-10-04 14:51:21Z

1

I do not believe there property to do this but you can make it work by setting up a subroute with the slash

.state('app', {
    url: '/app',
    template: '<app-index></app-index>',
})
.state('app.withSlash', {
    url: '/',
})

To add additional routes on top of 'app' you can just ignore the existence of the '.withSlash'

.state('app.withOtherParam', {
    url: '/:id',
})

Here is an example of a route where the slash is optional and has an additional param after.

.state('app', {
    url: '/app',
    abstract: true,
    template: '<ui-view/>',
})
.state('app.specificPage', {
    url: '/',
    template: '<someTemplate>'
})
.state('app.withId', {
    url: '/:id',
    template: '<someTemplate>',
})
.state('app.withId.withSlash', {
    url: '/',
})

edited Oct 4, 2016 at 14:51

answered Oct 4, 2016 at 14:43

Enzey

5,2541 gold badge20 silver badges20 bronze badges

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

1 Comment

jcubic Over a year ago

It work but I needed .state('app.without', { url: '/list', template: '<app-list></app-list>' });

Collectives™ on Stack Overflow

How to make last slash optional in angular ui router?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related