title: Caching URL view/state with parameters
body: <p>I'm making a mobile app using Cordova and AngularJS. Currently I have installed ui-router for routing but I'm open to any other alternative for routing.</p>
  
  <p>My desire: I want to cache certain views bound with parameters. In other words I want to cache paths (or pages).</p>
  
  <p>Example situation: let's say that we see some dashboard page, click on some book cover which redirects to the path <code>book/2</code>. This path is being loaded for the first time into app. Router redirects from <code>HomeController</code> to <code>BooksController</code> (whatever the name). Now the <code>BooksController</code> loads data for given <code>$stateParams</code> (book id = 2) and creates view filled with info about chosen book.</p>
  
  <p>What I want in this situation:</p>
  
  <ol>
  <li>I go back to the dashboard page - it is already loaded (cached?)</li>
  <li>I choose book #2 again</li>
  <li>Controller or router notices that data about this book is already loaded</li>
  <li>The view isn't being recreated, instead it's being fetched from cache</li>
  </ol>
  
  <p>Actually, it would be best to cache everything what I visit based on path. Preloading would be cool too.</p>
  
  <p>Reason: performance. When I open some list of books then I want it to show fast. When view is being created every time, then animation of page change looks awful (it's not smooth).</p>
  
  <p>Any help would be appreciated.</p>
  
  <h1>EDIT:</h1>
  
  <p>First of all, since I believe it's a common problem for many mobile HTML app programmers, I'd like to precise some information:</p>
  
  <ol>
  <li>I'm not looking for hacks but a clear solution <em>if</em> possible.</li>
  <li>Data in the views uses AngularJS, so YES, there <em>are</em> things like <code>ng-bind</code>, <code>ng-repeat</code> and so on.</li>
  <li><strong>Caching</strong> is needed for <em>both</em> <strong>data</strong> and <strong>DOM elements</strong>. As far as I know, browser's layout operation is not as expensive as recreating whole DOM tree. And repaint is not what we can omit.</li>
  <li>Having separate controllers is a natural thing. Since I could leave without it I cannot imagine how it would work anyway.</li>
  </ol>
  
  <p>I've got some semi-solutions but I'm gonna be strict about my desire.</p>
  
  <h2>Solution 1.</h2>
  
  <p>Put all views into one file (I may do it using gulp builder) and use <code>ng-show</code>. That's the simplest solution and I don't believe that anyone knowing AngularJS would not think about it.</p>
  
  <p>A <strong>nice trick</strong> (from @DmitriZaitsev) is to create a helper function to show/hide element based on current location path.</p>
  
  <p>Advantages:</p>
  
  <ol>
  <li>It's easy.</li>
  <li>KIND OF preload feature.</li>
  </ol>
  
  <p>Disadvantages:</p>
  
  <ol>
  <li>all views have to be in a single file. Don't ask why it's not convenient.</li>
  <li>Since it's all about mobile devices, sometimes I'd like to "clear" memory. The only way I can think of is to remove those children from DOM. Dirty but ok.</li>
  <li>I cannot easily cache /book/2 and /book/3 at the same time. I would have to dynamically create DOM children on top of some templates for each view bound with parameters.</li>
  </ol>
  
  <h2>Solution 2.</h2>
  
  <p>Use Sticky States AND Future States from <a href="http://christopherthielen.github.io/ui-router-extras/">ui-router-extras</a> which is awesome.</p>
  
  <p>Advantages:</p>
  
  <ol>
  <li>Separated views.</li>
  <li>Very clear usage, very simple since it's just a plugin for <code>ui-router</code>.</li>
  <li>Can create dynamic substates. So it would be possible to cache <code>book1</code>, <code>book2</code> but I'm not sure about <code>book/1</code> and <code>book/2</code></li>
  </ol>
  
  <p>Disadvantages:</p>
  
  <ol>
  <li>Again, I'm not sure but I didn't found an example with caching a <em>pair</em>/tuple <code>(view, parameters)</code>. Other than that it looks cool.</li>
  </ol>