AngularJS - 延迟加载视图答案

【问题标题】：AngularJS - Lazy Load ViewsAngularJS - 延迟加载视图
【发布时间】：2013-09-06 18:00:50
【问题描述】：

我正在创建一个单页主页，并希望通过延迟加载低于当前可见内容的视图来减少初始页面加载时间并节省用户带宽。主页会相当长，有一个导航、页眉、几个内容部分和一个页脚。我的目标是最初加载带有导航和粘性页脚的静态布局容器以及“根”角度应用程序。滚动或单击导航链接将导致加载下一个可视视图（单击跳转到多个视图的导航链接应加载用户将跳过的所有视图）。我知道这个任务有一个 jQuery 库，但我想坚持使用 Angular。

有没有一种简单的方法可以在 Angular 中以这种方式有条件地加载视图？

【问题讨论】：

你还没有接受我的回答（复选标记）。还不够吗？
您提供的解决方案很简洁，我给了您一点，但它不完整。提供的解决方案只允许按顺序单击和显示内容 - 导航链接每个都需要自己的 ng-click 或指令来加载与其哈希 url 相关的内容，并且需要逻辑来确定是否需要加载其他内容在它之前以及是否应该根据视口高度和内容高度加载内容。滚动也没有解决。老实说，我已经放弃了延迟加载，因为所有内容都在 1 秒内加载完毕，并不是每个用户都能看到所有内容
@m59 为了跟进，我为每个导航链接做了类似 loadContent('id') 的操作。然后我在Controller中修改了loadContent，得到了loadArray中id的数组索引，并且加载了之前所有的id内容。在我意识到我不需要延迟加载部分视图之前，我没有深入了解视口高度逻辑或执行任何滚动技术。
大声笑，那么也许你应该发布你自己的答案并接受它:) 但是，我相信我在回答你的问题方面做得很好，因为我给出了一个一般性的答案，并就你如何具体提出了建议处理它（自定义指令），您的问题也很笼统。您确实说过“要加载的下一个可见视图”，这就是我所做的。如果您确实发布了自己的解决方案，我建议您更新您的问题以使其更合适。
这是最近的一篇可能相关的帖子。 stackoverflow.com/questions/20410447/…

标签： javascript html angularjs

【解决方案1】：

这是我想出的，只是一个简单的例子。有很多方法可以做到这一点。如果您想要更精细的调整，您甚至可以编写自己的指令而不是使用ng-include/ng-repeat。

Live demo here 嗯，plnkr 现在有一些问题。如果页面甚至可以加载，有时似乎很难找到模板（请参阅控制台日志..它正在尝试加载它们，因此代码工作正常）。 Here's a jsbin demo also，但模板不会加载任何内容（空）。

<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"
  };
});

【讨论】：