html - Lazy loading Angular views -
i have calculator site utilizing angular. 1 page responsive , broken 7 sections of different calculators based on want. lazy load them cut down on loading @ 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 load default index.html page initially, select calculator you'd page load other view clicking button (or link), nice fade in/out , load interactive items.
i'm sort of looking similar picture, describes want minus user editing pages (they inputting values calculators instead, i'm not sure how end point.
check out ui-router , it's starter guide.
it's third party angular module nice features on default ngroute
. design angular application states
, can associate each state it's own controller , html template swap out each other. can have parent-child state relationships.
for use case have root state displays button or links sections of calculator. each section can child state of root state. way 1 calculator section active @ time. calculator child sections loaded when it's corresponding button/link 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 inserted in ui-view --> <ui-view></ui-view> </section> </div>
note ui-view
, ui-sref
directives provided ui-router
Comments
Post a Comment