CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
jcubic
jcubic

Reputation: 66478

How to make last slash optional in angular ui router?

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?

Upvotes: 0

Views: 124

Answers (1)

Enzey
Enzey

Reputation: 5254

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: '/',
})

Upvotes: 1

Related Questions