title: Lazy loading Angular views
body: <p>I have a calculator site that is utilizing Angular. It is one page that is responsive and is broken into 7 sections of different Calculators based on what they want. I would like to lazy load them to cut down on loading all at once.</p>
  
  <pre><code>&lt;body ng-app&gt;
  
   &lt;div id="wrapper"&gt;
    &lt;section id="Index page"&gt;1&lt;/section&gt;
    &lt;section id="Calc 1"&gt;2&lt;/section&gt;
    &lt;section id="Calc 2"&gt;3&lt;/section&gt;
    &lt;section id="Calc 3"&gt;4&lt;/section&gt;
    &lt;section id="Calc 4"&gt;5&lt;/section&gt;
    &lt;section id="Calc 5"&gt;6&lt;/section&gt;
    &lt;section id="Calc 6"&gt;7&lt;/section&gt;
    &lt;section id="Calc 7"&gt;8&lt;/section&gt;
   &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I'm looking to load the default index.html page initially, then you will select which Calculator you'd like the page load the other view by clicking a button (or link), with a nice fade in/out and then load its interactive items.</p>
  
  <p>I'm sort of looking for something similar to this picture, which describes exactly what I want minus the user editing the pages (They would be inputting values into the calculators instead, but I'm not sure how to get to that end point.</p>
  
  <p><a href="http://i.stack.imgur.com/h36MS.jpg" rel="nofollow">http://i.stack.imgur.com/h36MS.jpg</a></p>