在 AngularJS 中延迟加载数据的指令 [英] Directive for lazyloading data in AngularJS

问题描述

我目前正在学习 Angular，并试图找出延迟加载数据和构建代码的好模式.

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

为隐藏指令或视图获取的数据是多余的.

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

制作可以谴责此问题的良好架构的好方法是什么?

如果指令可以检查它当前是否可见(在当前视口中，例如不在隐藏的父级或 display: none 中)会怎样.

我已经提供了这样一个指令的示例用法，但我想要一些关于如何实现它的指示.

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

注意:以下是一个虚构的例子，没有很好的用例.

<!-- 检查设备是否具有某些功能，例如触摸，并根据结果隐藏内容 --><div ng-show="current.device.touch"><users lazyload="{userList: dataservice.getUsers | filter:search}" treshold="200px" placeholder="emptyUserlist"></用户>

这个想法有多好/多坏?

数据服务是一个更抽象的服务，它从 $resource 和缓存容器中获取数据.

解决方案

Angular 不支持延迟加载作为一个特性，但任何东西仍然可以延迟加载！

关键在config函数中:

var providers = {};var app = angular.module('myApp', []);app.config(函数($controllerProvider,$编译提供者，$routeProvider,$过滤器提供者，$提供){provider.controllerProvider = $controllerProvider;provider.compileProvider = $compileProvider;provider.routeProvider = $routeProvider;provider.filterProvider = $filterProvider;provider.provide = $provide;});

现在您可以使用缓存的提供程序来延迟加载(注册)Angular 功能.

延迟加载控制器:

function myCtrl($scope) {//等等}provider.controllerProvider.register('myCtrl', myCtrl);

延迟加载指令:

function myDirectiveName() {//等等}provider.compileProvider.directive('myDirectiveName', myDirectiveName);

一个实用的和更高级的例子，查看我对这篇文章的回答(点击). 其中我在向下滚动页面时从外部文件延迟加载视图及其控制器.

简单演示:

现场演示(点击)

角度逻辑:

var providers = {};var app = angular.module('myApp', []);app.config(函数($controllerProvider,$编译提供者，$routeProvider,$过滤器提供者，$提供){provider.controllerProvider = $controllerProvider;provider.compileProvider = $compileProvider;provider.routeProvider = $routeProvider;provider.filterProvider = $filterProvider;provider.provide = $provide;});app.directive('懒惰', function() {返回 {限制:'A'，编译:函数(元素，属性){provider.controllerProvider.register('myCtrl', myCtrl);provider.compileProvider.directive('myDirectiveName', myDirectiveName);var span = angular.element('').attr('我的指令名称', '').attr('ng-controller', 'myCtrl');element.append(span);}};});函数 myDirectiveName() {返回 {限制:'A'，编译:函数(元素，属性){var str = '此文本来自延迟加载指令 {{anotherString}}';element.text(str);}};}函数 myCtrl($scope) {$scope.anotherString = '这个文本来自一个延迟加载的控制器！';}

I'm currently learning Angular and trying to figure out a good pattern for lazyloading data and structuring code.

I'm making an responsive web application, and I would like do be able to define that some parts of the web-page are to be hidden from the view (preferably using media queries).

The data fetched for the hidden directives or views is then redundant.

The difference can be substantial from a desktop to a mobile view, and I would like the application to be as light as possible on the mobile perfomance wise and network usage wise.

What is a good approach for making a good architecture that could reprimend this issue?

What if the directive could check if it was currently visible (both within the current viewport and for example not within a hidden parent nor display: none.

I've provided an example usage of such a directive, but I would like some pointers to how this could be implemented.

The directive could take an expression that pointed to a callback function that should be fired when the component is visible and within 200px of the viewport.

Note: The following is a fictional example with no good use case.

<!-- 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>

How good/bad of an idea is this?

The dataservice is a more abstracted service that gets its data from $resource and cache containers.

解决方案

Angular doesn't support lazy-loading as a feature, but anything can still be lazy loaded!

The key is in the config function:

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

Now you can use the cached providers to lazy-load (register) Angular features.

Lazy-load a controller:

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

Lazy-load a directive:

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

For a practical and more advanced example, See my answer on this post (click). in which I lazy load views and their controllers from external files while scrolling down the page.

Simple demonstration:

Live demo here (click)

<div lazy></div>

Angular logic:

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!';
}

这篇关于在 AngularJS 中延迟加载数据的指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！