指令在AngularJS惰性加载数据 [英] Directive for lazyloading data in AngularJS

问题描述

目前，我正在学习角，并试图找出一个好的模式为惰性加载数据和结构化code。

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

我作出响应的Web应用程序，我希望做可以定义该网页中的某些部分进行（pferably使用媒体查询$ P $）从视图中隐藏。

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.

什么是制作好的架构，可以reprimend这一问题的好办法？

如果该指令可以检查，如果它是当前可见（包括当前视口内，例如不隐藏父之内，也不显示：无

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.

该指令可以采取一个前pression是指向一个回调函数，当组件是可见的，在视口200像素应该被解雇。

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?

的 DataService的是一个更抽象服务，从$资源和缓存容器获取数据。的

推荐答案

角不支持延迟加载作为一个功能，但任何事情还是可以偷懒装！

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.

延迟加载控制器：

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

延迟加载指令：

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

对于一个实际的和更高级的例子，<一个href=\"http://stackoverflow.com/questions/20410447/lazy-loading-angular-views-and-controllers-on-page-scroll/20413928#20413928\">See我的回答对这个职位（点击）。的，其中从外部文件我懒加载的看法和他们的控制器，同时向下滚动页面。

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.

简单的例子：

这里现场演示（点击）

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

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