title: Large scale AngularJS app - multiple UI layouts
body: <p>I'm just starting out learning AngularJS.  The router makes it dead simple to swap a single view (dom element) with a partial.  In my case I might have 20 or so screens with a "full size" layout replacing the entire screen minus the common top header, like the following:</p>
  
  <p><img src="https://i.stack.imgur.com/NK88q.png" alt="full size layout"></p>
  
  <p>This works fine.  However, my application requires more than one layout!  If I open some record, it might have a dynamic submenu with ~20 links where clicking on each link should only swap the right panel.  Of course, I only want to fetch this dynamic submenu once.</p>
  
  <p><img src="https://i.stack.imgur.com/z4fRo.png" alt="detailed record with submenu"></p>
  
  <p>Perhaps opening up something else might have a completely different layout (with its own submenu - possibly horizontal).</p>
  
  <p>Can Angular handle multiple layouts like this?  Or would I actually need to build separate applications for each type of layout!?  This type of thing is fairly trivial on other frameworks I've used such as GWT (with Activities and Places binding to URL), ExtJS, etc.</p>
  
  <p>I found a similar (though perhaps not as complex) question posted here with no answer:
  <a href="https://stackoverflow.com/questions/21317642/multiple-layouts-with-angular">Multiple layouts with Angular</a></p>