在AngularJS中延遲加載數據的指令

Question

我目前在學習Angular，並試圖找出延遲加載數據和構造代碼的良好模式。

我在做一個響應式Web應用程序，我希望能夠定義網頁的某些部分將從視圖中隱藏（最好使用媒體查詢）。

然後，爲隱藏的指令或視圖獲取的數據是多餘的。

從臺式機到移動視圖的差異可能很大，我希望應用程序在移動性能和網絡使用方面儘可能輕。

建立一個良好的架構可以推薦這個問題的好方法是什麼？

如果該指令可以檢查，如果它是當前可見（包括當前視口內例如不中隱藏的父母也不display: none。

我提供這樣一個指令的用法的例子，但我想一些指向如何實現這一點的

該指令可以採取指向一個回調函數，當組件是可見的，內視的200像素應該被解僱的表達

注意：以下是虛構的沒有好用例的例子。

<!-- Check if the device has some feature, for example touch, and hide content based on results --> 
<div ng-show="current.device.touch"> 
    <users lazyload="{userList: dataservice.getUsers | filter:search}" treshold="200px" placeholder="emptyUserlist"> 
    </users> 
</div> 

這個想法有多好/不好？

dataservice是一個更抽象的服務，它從$ resource和cache容器中獲取數據。

Answer 1

角不支持延遲加載的功能，但任何仍然可以懶加載！

的關鍵是在config功能：

var providers = {}; 

var app = angular.module('myApp', []); 
app.config(function(
    $controllerProvider, 
    $compileProvider, 
    $routeProvider, 
    $filterProvider, 
    $provide 
) { 
    providers.controllerProvider = $controllerProvider; 
    providers.compileProvider = $compileProvider; 
    providers.routeProvider  = $routeProvider; 
    providers.filterProvider  = $filterProvider; 
    providers.provide   = $provide; 
}); 

現在你可以使用緩存的供應商延遲加載（註冊）角功能。

延遲加載控制器：

function myCtrl($scope) { 
//etc 
} 
providers.controllerProvider.register('myCtrl', myCtrl); 

延遲加載一個指令：

function myDirectiveName() { 
    //etc 
} 
providers.compileProvider.directive('myDirectiveName', myDirectiveName); 

對於一個實際的和更先進的實施例，See my answer on this post (click).其中我懶負荷的觀點和他們的控制器從外部文件向下滾動頁面。

簡單的例子：

Live demo here (click)

<div lazy></div> 

角邏輯：

var providers = {}; 

var app = angular.module('myApp', []); 
app.config(function(
    $controllerProvider, 
    $compileProvider, 
    $routeProvider, 
    $filterProvider, 
    $provide 
) { 
    providers.controllerProvider = $controllerProvider; 
    providers.compileProvider = $compileProvider; 
    providers.routeProvider  = $routeProvider; 
    providers.filterProvider  = $filterProvider; 
    providers.provide   = $provide; 
}); 

app.directive('lazy', function() { 
    return { 
    restrict: 'A', 
    compile: function(element, attrs) { 
     providers.controllerProvider.register('myCtrl', myCtrl); 
     providers.compileProvider.directive('myDirectiveName', myDirectiveName); 
     var span = angular.element('<span></span>') 
     .attr('my-directive-name', '') 
     .attr('ng-controller', 'myCtrl'); 
     element.append(span); 
    } 
    }; 
}); 

function myDirectiveName() { 
    return { 
    restrict: 'A', 
    compile: function(element, attrs) { 
     var str = 'This text came from a lazy-loaded directive {{anotherString}}'; 
     element.text(str); 

    } 
    }; 
} 
function myCtrl($scope) { 
    $scope.anotherString = 'and this text came from a lazy-loaded controller!'; 
} 

Answer 2

Angular目前無法進行延遲加載。然而，MISKO（角的創造者）提到在這最近聚會懶加載的產品路線圖在不久的將來：

http://www.youtube.com/watch?v=Dro-hLSQhoc