Директива для lazyloading данных в AngularJS

В настоящее время я изучаю Angular и пытаюсь найти хороший образец для lazyloading данных и кода структурирования.

Я создаю отзывчивое веб-приложение, и я хотел бы, чтобы у меня было возможность определить, что некоторые части веб-страницы должны быть скрыты от представления (предпочтительно с использованием медиа-запросов).

Данные, полученные для скрытых директив или представлений, затем являются избыточными.

Разница может быть существенной с рабочего стола на мобильный вид, и я хотел бы, чтобы приложение было максимально легким на мобильном телефоне и использовании сети.

Что такое хороший подход для создания хорошей архитектуры, которая могла бы вынести эту проблему?

Что делать, если директива может проверить, была ли она в данный момент видимой (как в текущем видовом экране, так и, например, не в скрытом родителе и 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>

Насколько это хорошо/плохо из идеи?

Служба данных - это более абстрактная служба, которая получает свои данные из контейнеров $resource и cache.

Ответ 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;
});

Теперь вы можете использовать кэшированных поставщиков для функций lazy-load (register) Angular.

Lazy-load контроллер:

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

Lazy-load директива:

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

Для практического и более продвинутого примера См. мой ответ на этот пост (нажмите)., в котором я ленивый вид загрузки и их контроллеры из внешних файлов при прокрутке страницы.

Простая демонстрация:

Живая демонстрация здесь (нажмите)

<div lazy></div>

Angular логика:

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

Ответ 2

Angular в настоящее время не может выполнять ленивую загрузку. Тем не менее, Misko (создатель Angular) упоминает в этой недавней встрече, что ленивая загрузка находится в дорожной карте продукта в ближайшем будущем:

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