title: How to achieve a snappy, cascading UX via AngularJS + ui-router
body: <pre><code>            root
             / | \
            /  |  \
           /   |   \
     header content navbar
               |
               |
             library (abstract)
             / | \
            /  |  \
           /   |   \
      Authors Books Movies
  </code></pre>
  
  <p>Using my beautiful graphic above I would like to explain a few things:</p>
  
  <ol>
  <li><code>header</code> has some API data to retrieve about the user (e.g. <code>GET /user/me</code>)</li>
  <li>Authors has its own <code>GET /authors</code> it uses to populate that view</li>
  <li>Books and Movies are the same as Authors, they are just their own state</li>
  </ol>
  
  <p>Now this is what I want:</p>
  
  <p>I want a cascading layout whereby the main layout of the page can be loaded first, then the "library" application can be loaded on top of it without any "lag" or blocking of the UX.</p>
  
  <p>However, with how ui-router seems to work today, if I have 1 resolve in this entire application and I place it in the "library" state, what happens is the "header" and "navbar" states are blocked until the resolve completes.  What I would expect to happen is the parent states load first with their views, then the "library" state blocks on the resolve. That way you could see the navbar and header in the browser as soon as the page is loaded, but you would get a loading bar or spinner until the "library" resolve finished.</p>
  
  <p>Any easy way to achieve this functionality would be to not use resolves and instead just have all the API logic inside the controller, however this causes the scope of each of the 3 resources to be limited to their controller and that is it. Meaning, if you are in the <code>Movies</code> controller, you have no visibility into the <code>Authors</code> resources because <code>Authors</code> are scoped to only the "Authors" controller. This makes things like web sockets less efficient and even unusable.</p>
  
  <p>Am I doing something wrong here which is causing me to not get the desired functionality or is this not possible with this kind of architecture?</p>