3

単一ページのホーム サイトを作成しており、現在表示されているビューよりも下のビューを遅延読み込みすることで、最初のページの読み込み時間を短縮し、ユーザーの帯域幅を節約したいと考えています。ホームページはかなり長く、ナビゲーション、ヘッダー、いくつかのコンテンツ セクション、およびフッターがあります。私の目標は、「ルート」Angular アプリとともに、nav とスティッキー フッターを含む静的レイアウト コンテナーを最初に読み込むことです。ナビゲーション リンクをスクロールまたはクリックすると、次に表示可能なビューが読み込まれます (複数のビューを飛び越えてジャンプするナビゲーション リンクをクリックすると、ユーザーがジャンプするすべてのビューが読み込まれます)。このタスク用の jQuery lib があることは知っていますが、Angular に固執したいと思います。

Angular でこの方法でビューを条件付きで読み込む簡単な方法はありますか?

4

1 に答える 1

3

簡単な例として、これが私が思いついたものです。これを実現する方法はたくさんあります。さらに微調整が必​​要な場合は、を使用する代わりに独自のディレクティブを作成することもできますng-include/ng-repeat。

ライブデモはこちら うーん、plnkr は現在いくつかの問題を抱えています。ページがロードされる場合でも、テンプレートを見つけるのに問題があるようです (コンソール ログを参照してください。それらをロードしようとしているため、コードは正常に動作しています)。これも jsbin のデモですが、テンプレートは何もロードしません (空です)。

<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"
  };
});
于 2013-09-06T19:30:07.127 に答える