title: Angular UI router structure for this type of application
body: <p>I am building an reporting application that uses stacked tabs for navigation.  These tabs are in a parent/child hierarchy as shown below.</p>
  
  <p><img src="https://i.stack.imgur.com/3YR0A.png" alt=""></p>
  
  <p>When the user selects the parent tab (ex feature 2) they the feature page which may or may not have sub-features.  If there are sub feature these are displayed as separate pages accessed via the subfeature tab.  The user selects parameters on the page, presses the Launch button, and an appropriate report is created.   When a feature or subfeature page is selected a MRU screen appears to the right with hyperlinks that will launch previous reports for the feature/subfeature.</p>
  
  <p>Using Angular UI Router the hierarchy seems to be.</p>
  
  <p>feature 1</p>
  
  <ul>
  <li><p>subfeature 1.1</p></li>
  <li><p>subfeature 1.2</p></li>
  </ul>
  
  <p>feature 2</p>
  
  <ul>
  <li><p>subfeature 2.1</p></li>
  <li><p>subfeature 2.2</p></li>
  </ul>
  
  <p>MRU - named view?</p>
  
  <ol>
  <li><p>Is this a good case to use Angular-UI - router?</p></li>
  <li><p>If so, does my hierarchy seem reasonable?  Or should there be a nav state that contains the feature/subfeature hierarchy.  That has some appeal since the nav page could host the feature tabs.</p></li>
  <li><p>How can I reference the MRU list?  Is this a case for a "named" view?</p></li>
  </ol>
  
  <p>This would be my first application using angular-ui-router so I appreciate any advice or relevant examples.</p>
  
  <p>jerry</p>