AngularJS - 延迟加载浏览 [英] AngularJS - Lazy Load Views

问题描述

我创建一个单一页面家网站，并希望降低初始页面加载时间，由是下面有什么是目前可见的懒加载的看法保存用户的带宽。主页将是相当长的，具有导航，标题，内容几个部分，和页脚。我的目标是先加载的资产净值和根的角度应用程序一起粘页脚中的静态布局容器。滚动或点击导航链接，将导致下一个可见的视图加载（点击该跳下过去几年的观点应该载入所有用户会跳过去的观点的导航链接）。我知道有一个jQuery的lib这个任务，但我想坚持到角。

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?

推荐答案

这就是我想出了，只是作为一个简单的例子。还有，你可以做到这一点许多方面。如果你想要更多的微调，你甚至可以写，而不是使用你自己的指令NG-包括/ NG重复。

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.

住在这里演示
嗯，plnkr是有现在的一些问题。如果页面甚至会加载，它似乎有时很难发现模板（见控制台log..it试图加载它们，所以code是工作的罚款）。 这里有一个jsbin演示也的，但模板只是要加载没有（空）。

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 - 延迟加载浏览的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！