AngularJS - Lazy Load Views

Question

I'm creating a single page home site and would like to reduce initial page load time and save user bandwidth by lazy loading views that are below what is currently visible. The home page will be rather long, with a nav, header, several content sections, and a footer. My goal is to initially loading a static layout container with the nav and sticky footer along with the 'root' angular app. Scrolling or clicking on a nav link will cause the next viewable view to load (clicking a nav link that jumps down past several views should load all the views a user will jump past). I know there is a jQuery lib for this task, but I'd like to stick to Angular.

Is there an easy way to conditionally load views this way in Angular?

You haven't accepted my answer (check mark). Is it not sufficient? — m59
The solution you have provided is neat & I have given you a point for it but it is incomplete. The solution provided only allows for clicking and displaying content in a sequential order - the nav links will each need their own ng-click or directive to load the content related to it's hash url and will need logic to determine if other content needs to be loaded before it and if content should be loaded after based on viewport height and content height. Scrolling is also not addressed. To be honest, I've forgone lazy loading as all content loads within 1 second & not every user sees all content — SirTophamHatt
@m59 To follow up, I did something like loadContent('id') for each nav link. I then modified loadContent in the Controller to get the array index of the id in loadArray, and load all id content before. I did not get so far as the viewport height logic or do any scrolling techniques before I realized I didn't need to lazy load the partial views. — SirTophamHatt
lol, then maybe you should post your own answer and accept it :) However, I believe I did a fine job of answering your question, as I gave a general answer with suggestions on how you might specifically handle it (custom directive) and your question was also general. You did say "the next viewable view to load", so that's what I did. If you do post your own solution, I suggest updating your question to be more appropriate. — m59
Here's a recent post that may be relevant. stackoverflow.com/questions/20410447/… — m59

m59 m59 · Accepted Answer · 2013-09-06T19:30:07

Here's what I came up with, just as a quick example. There are many ways you could accomplish this. If you want more fine tuning, you could even write your own directive instead of using ng-include/ng-repeat.

Live demo here Hmm, plnkr is having some issue right now. If the page will even load, it seems to sometimes have trouble finding the templates (see the console log..it is trying to load them, so the code is working fine). Here's a jsbin demo also, but the templates are just going to load nothing (empty).

<div ng-repeat="lazy in loaded">
  {{lazy}}
  <div ng-include="lazy"></div>
</div>
<button ng-click="loadNext()">Load Next</button>
<button ng-click="unload()">Reset</button>



var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
  var toLoad = [ //list the templates to be loaded
    'tmpl.html',
    'tmpl2.html',
    'tmpl3.html'
  ];
  $scope.loaded = []; //anything in here will be loaded to the page
  $scope.loadNext = function() {
    if (toLoad.length) { //if there are any item left to load
      $scope.loaded.push(toLoad.splice(0, 1)[0]); //move first item to "loaded"
    }
  };
  $scope.unload = function() {
    toLoad = $scope.loaded.splice(0, $scope.loaded.length); //move all items back to "toLoad"
  };
});

AngularJS - Lazy Load Views

1 Answers