I am managing a group of pages/URLs that share a common parent state/template:
/orders/list
/orders/create
/products/list
/products/create
Currently, I have two dummy states/routes (/products and /orders) that serve as parent states for the other substates - both of which are unnecessary and causing duplication in achieving the desired URLs.
.state('orders', {
url: "/orders",
templateUrl: "/partials/common/main"
})
.state('products', {
url: "/products",
templateUrl: "/partials/common/main"
})
.state('orders.list', {
url: "/view",
templateUrl: "/partials/orders/view"
})
.state('orders.create', {
url: "/create",
templateUrl: "/partials/orders/edit"
})
.state('products.list', {
url: "/view",
templateUrl: "/partials/products/view"
})
.state('products.create', {
url: "/create",
templateUrl: "/partials/products/edit"
})
Is there a way to simplify this setup? Ideally, I would like to have only one main state - I've looked into aliases but didn't find a suitable solution.
Perhaps something like:
.state('main', {
url: "/[orders|products]", // some kind of URL matching
templateUrl: "/partials/common/main"
})
It's important to note that /partials/common/main contains an inner UI-view used by all orders/... and products/... with the same content across these two main routes (in reality, there are around 10 similar "placeholder" routes).