Defining multiple states in Angular in one line, using UI-Router - angularjs

Question

Apologies if this question is obvious.
I am defining several states simultaneously in my main modules file for use with UI-Router.
My code is:
samApp.config(function($stateProvider) {
$stateProvider
.state('index', {
url: "",
views: {
"nav": {template: "index.nav"},
"header": { template: "index.viewA" },
"page": { template: "index.viewB" }
}
})
.state('articles', {
url: "/route1",
views: {
"nav": {template: "index.nav"},
"viewA": { template: "route1.viewA" },
"viewB": { template: "route1.viewB" }
}
})
.state('route2', {
url: "/route2",
views: {
"nav": {template: "index.nav"},
"viewA": { template: "route2.viewA" },
"viewB": { template: "route2.viewB" }
}
})
});
As you can see, I want every route to use the same Nav. Would it be possible to write something like:
.state(['index', 'articles', 'route2'], {
url: "",
views: {
"nav": {template: "index.nav"}
}
})
Or is this just out of the question?
Thank you.

Answer 1

In order to group view definition, use an abstract state:
$stateProvider
.state('parent', {
// use quotes for avoiding compilation issues with this reserved word
'abstract': true,
url: '',
views: {
'nav': { template: 'index.nav' }
}
})
.state('articles', {
parent: 'parent',
url: "/route1",
views: {
// use the viewName#stateName syntax (stateName is empty since we address root no name state
"header#": { template: "index.viewA" },
"page#": { template: "index.viewB" }
}
})
/* ... quite the same for other child states */
;
See ui router view names documentation and ui router abstract state documentation.
'