angular-ui-router: Creating extendable, non-url-altering layout states?

0
votes

What I'm trying to do

  • There are two 'styles' or 'classes' of display
    • "Normal": [ Header | Body | Footer ] - I use this for most states
    • "Discreet": [ Body ] only, centre of screen - I use this for states like login/register, errors etc.
  • These 'styles of display' don't correspond to example.com/normal/* or example.com/discreet/*, but are rather just extendable templates for other views. They should affect the URL at all.
  • When switching between normalstyled states, only the body should reload (animate, whatever) and the header/footer should remain static.
  • When switching between discreet styled states, the entire page, being wholely made of the body view, should transition.

Such that the URLs and states should look like this (screenshots):

What I've tried

What I've got visually works, until I start working with transitions, and you see the header/footer animate along with the body:

app.config()

$stateProvider
.state('index', {
  url: '/',
  views: {
    '': { templateUrl: 'partials/template-normal' },
    'body@index': { templateUrl: 'partials/view-index' }
  }
})
.state('signin', {
  url: '/signin',
  views: {
    '': { templateUrl: 'partials/template-discreet' },
    'body@signin': { templateUrl: 'partials/view-signin', controller: 'SigninCtrl' }
  }
}

template-normal

header.app__header ...
main.app__body(ui-view='body')
footer.app__footer ...

template-discreet

main.app__body--discreet(ui-view='body')
1
javascriptangularjsroutesangular-uiangular-ui-router

1 Answers

0
votes

Alright, I've figured it out myself. Turns out it's alot more flexible and intuitive than I had assumed.

1. Define root layouts

We define two 'root' states that point towards different layout templates, with url: null and abstract: true.

$stateProvider
.state('standard', {
  url: '',
  abstract: true,
  views: {
    'layout@' : { templateUrl: 'partials/template-standard' }
  }
})
.state('simple', {
  url: '',
  abstract: true,
  views: {
    'layout@' : { templateUrl: 'partials/template-simple' }
  }
})

2. Define views as children of root layouts

We then define our routes as per usual, prepending the layout parent to the state name:

.state('standard.index', {
  url: '/',
  views: {
    'content': { templateUrl: 'partials/view-index' }
  }
})
.state('simple.signin', {
  url: '/signin',
  views: {
    'content': { templateUrl: 'partials/view-signin', controller: 'SigninController' }
  }
})

The result is precisely what I hoped for. Standard layout child views transition amongst themselves, whilst transitions between different layouts behave as they normally would.

I think at some point I might define a SuperRoot app state as a parent of the layouts, for things like global data resolving.