在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