jDelforge jDelforge - 5 months ago 12
AngularJS Question

UI-Router : Pages & Posts routing are interfering

Here is the setup :

$stateProvider

// MAIN
.state('app', {
abstract: true,
})

// PAGES - All pages are always children of a parent page
.state('app.page', {
url: '/{level1}', <--- how to exclude /products from {level1} ?
})
.state('app.page.child', {
url: '/{level2}',
})

// POSTS
.state('app.posts', {
url: '/products', // <-- Error, not isolated
})
.state('app.posts.type', {
url: '/{type}',
})


Problem: When i lead to a child post it is considered has a child page.

Is there a way to say to exclude
products
from {level1} ?

Or any other idea / better way of approaching the problem ?

Thank you !

Johan

Answer

Well, changing the order of the statements makes it work...

$stateProvider

// MAIN
    .state('app', {
         abstract: true,
     })

// POSTS
    .state('app.posts', {
         url: '/products',
    })
    .state('app.posts.type', {
         url: '/{type}',
    })

// PAGES
    .state('app.level1', {
         url: '/{level1}', 
    })
    .state('app.level1.level2', {
         url: '/{level2}',
    })

I just inverted Posts and Pages declaration. Any other tips are welcome!