Directive for lazyloading data in AngularJS

Question

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.

Community · Accepted Answer · 2017-05-23 11:43:22Z

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

Jeff Whelpley · Accepted Answer · 2013-02-16 03:38:43Z

0

Angular does not currently have the ability to do lazy loading. However, Misko (the creator of Angular) mentions in this recently meetup that lazy loading is on the product roadmap for the near future:

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

answered Feb 16, 2013 at 3:38

Jeff Whelpley

5791 gold badge5 silver badges11 bronze badges

2 Comments

Kenneth Lynne Over a year ago

Thanks for your answer. Yes, I've watched it, but I'm hoping someone would point me in the right direction so I could write it my self. I want to learn some good patterns for doing it, even if it was included in the Angular core.

Sjoerd222888 Over a year ago

For lazyLoading you can use the ocLazyLoad module.

Collectives™ on Stack Overflow

Directive for lazyloading data in AngularJS

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related