Angular ui-router: Mix static with dynamic routes

Question

I have one exception to an otherwise dynamic route:

    .state('item', {
        abstract: true
    })

// This is the 'hardcoded' static route
    .state('item.static', {
        url: '/static'
    })

    .state('item.content', {
        url: '/:para'

    })

As you can see the first child state has a fix url route. Then if the url is not exactly this fix word I want the routing to happen with child state 2.

It works when I first hit child state 1. However when I refresh the browser the views are not longer mapped and the ui-view stays empty. If I refeesh one of the dynamic routes it works.

I left out view and controller setup intentionally to make it look simpler.

This is not happening. Usually. There must be some other unusual setting. I would suggest create plunker to reproduce that issue. Surely you will then get help here... — Radim Köhler

Jeff Ancel Jeff Ancel · Accepted Answer · 2015-01-29T23:35:14

Have you tried a regex pattern to rule out the "static" route for the para route? Theoretically, you should be able to use ruling out the "static" route and ui-router will pick up the dynamic route at that point.

Ui-Router Documentation

From Documentation:

// will only match a contactId of one to eight number characters
url: "/contacts/{contactId:[0-9]{1,8}}"

Angular ui-router: Mix static with dynamic routes

1 Answers