Lazy loading Angular views

2
votes

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.

<body ng-app>

 <div id="wrapper">
  <section id="Index page">1</section>
  <section id="Calc 1">2</section>
  <section id="Calc 2">3</section>
  <section id="Calc 3">4</section>
  <section id="Calc 4">5</section>
  <section id="Calc 5">6</section>
  <section id="Calc 6">7</section>
  <section id="Calc 7">8</section>
 </div>
</body>

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.

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.

http://i.stack.imgur.com/h36MS.jpg

1
htmlangularjs
It's a little unclear what you're asking. Are you looking to lazily load the html template files for the controllers? Or are you looking to lazily load the JS itself? Either way, angular doesn't provide much help for that out of the box. You will probably want to go with something like requirejs. – Andrew Eisenberg
@AndrewEisenberg sorry for not being clear, i'm still learning AngularJS, and as a result do not have the lingo under my belt yet. I am looking to lazy load the HTML templates, so that the page itself doesn't have to reload when you change calculators, but the html template of the selected calculator does. – Bengejd

1 Answers

0
votes

Check out ui-router and it's starter guide.

It's a third party angular module with some nice features over the default ngRoute. You design your angular application into states and can associate each state with it's own controller and HTML template that swap out each other. You can also have parent-child state relationships.

For your use case you could have a root state that displays the button or links for the sections of the calculator. Each section can then be a child state of the root state. This way only one calculator section will be active at a time. The calculator child sections will only be loaded when it's corresponding button/link is selected.

root state

<div id="wrapper">
  <section id="Index page">
    Index Page
    <a ui-sref="root.section1">Section 1</a>
    <a ui-sref="root.section2">Section 2</a>
    <a ui-sref="root.section3">Section 3</a>
    ...

    <!-- calculator section will be inserted in ui-view -->
    <ui-view></ui-view>
  </section>
</div>

NOTE ui-view and ui-sref are directives provided by ui-router