1

我目前正在学习 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 和缓存容器中获取数据。

4

2 回答 2

2

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

有关更实用和更高级的示例，请参阅我在这篇文章中的回答（单击）。我在向下滚动页面时从外部文件延迟加载视图及其控制器。

简单演示：

现场演示（点击）

<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!';
}
于 2013-12-06T03:54:25.757 回答
0

Angular 目前不具备延迟加载的能力。然而，Misko（Angular 的创建者）在最近的聚会中提到延迟加载在不久的将来的产品路线图上：

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

于 2013-02-16T03:38:43.017 回答