I asked this question the other day, and as I asked it I suspected I was creating an xy situation. I'm asking this one separately in hopes of getting at the y:
I have an Angular (1.2.1) app running UI-router (0.2.13), with the following basic structure:
<body>
<div app-nav></div>
<div ui-view></div>
</body>
and (currently) the following state structure:
$stateProvider.state('home', {
template: "<div home></div>",
url: '/'
}).state('home.geo', {
url:'/geo/{geo}'
}
where the home
directive simplifies to:
<div>
<div main-list></div>
<div side-list></div>
</div>
The main-list
and side-list
directives each display a list of content. app-nav
contains several selectors that filter the content shown in the the list directives (more specifically, the filters are the names of regions, and they filter to show only content relevant to the specified region).
I've taken to thinking of these filters as corresponding to "states" - the "geo-state" of the app - which is maintained in a service and is useful for telling the list directives what to display. But I think I've erred in the correlation I've drawn between these "geo-states" to actual ui-router states: They use the exact same template and controller, and it's critical that no reload occur when transitioning from one to the other. They only differ in the data they display.
So, I think I should lose the nesting here and have a single ui-router state - but I need each geo-state to have a corresponding url: Whereas mysite.com/
will open the home state with no geo-filter applied, mysite.com/california
will open the home state with the California filter applied automatically (ideally with california-specific data resolved).
Please help me wrap my head around the best way to implement this.