Question

我目前正在学习Angular并试图找出一个很好的模式来延迟加载数据和构造代码。

我正在制作一个响应式Web应用程序，我希望能够定义网页的某些部分将从视图中隐藏（最好使用媒体查询）。

为隐藏指令或视图提取的数据是多余的。

从桌面到移动视图的差异可能非常大，我希望应用程序尽可能在移动性能和网络使用方面尽可能轻松。

制作一个可以推销此问题的优秀架构的好方法是什么？

如果指令可以检查当前是否可见（在当前视口中，例如在隐藏的父级内，也不在display: none内，该怎么办。

我已经提供了这样一个指令的示例用法，但我想指出如何实现它。

该指令可以采用一个表达式，该表达式指向一个回调函数，该函数应该在组件可见且在视口的200px范围内时触发。

注意：以下是一个没有好用例的虚构示例。

<!-- 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和缓存容器中获取数据。

Answer 1

Angular并不支持延迟加载作为一项功能，但任何东西仍然可以延迟加载！

密钥位于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;
});

现在，您可以使用缓存的提供程序来延迟加载（注册）Angular功能。

延迟加载控制器：

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（Angular的创建者）在最近的聚会中提到延迟加载是在不久的将来的产品路线图上：

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

AngularJS中延迟加载数据的指令

2 个答案: