AngularJs на готовом рендеринге

Question

Я стараюсь часами, но не везет. У меня есть приложение angularjs, где я хочу представить пользователю загрузчик, пока страница не будет полностью загружена (отображается). Особенно между изменениями состояния, поскольку клик зарегистрирован, но ничего не происходит сразу. Таким образом, пользователь не получает обратной связи, если он загружается или нет. Мое приложение запрашивает некоторые данные через ajax, когда контроллер запускается. я уже пробовал разные решения:

1. Использование $stateChangeStart и $viewContentLoaded. Этот подход отлично работает, если представления загружаются впервые, но срабатывает слишком рано для каждого последующего изменения состояния. Это связано с кэшированием шаблонов. Каждый раз при запуске viewContentLoaded шаблон кэшируется.

2. Использование директивы с $timeout. Это очень хорошо работает при первом загрузке, если я прикреплю его к body моего html-документа. Но поскольку я использую вложенные представления/контроллеры, директива не вызывается снова, когда я переключаюсь между состояниями. Он снова запускается раньше, когда я присоединяю директиву к элементу ui-view.

Есть ли альтернативы? Я делаю что-то неправильно? Возможно ли это?

Благодаря

Answer 1

Вы пытались использовать объект resolve?

Вы можете использовать разрешение, чтобы предоставить вашему контроллеру контент или данные, которые являются обычными для состояния. Решение - это необязательная карта зависимостей, которая должна быть введена в контроллер.

https://github.com/angular-ui/ui-router/wiki#resolve

Использование resolve позволяет получать данные до того, как контроллер инициализируется. Таким образом, когда контроллер выполняет и $viewContentLoaded обжигают вы можете быть уверены, что ваши данные доступны:

$stateProvider.state('myState', { 
    templateUrl: 'template.html', 
    controller: function($scope, myData){ 
     $scope.myData = myData; 
    }, 
    resolve:{ 
     myData: function($http){ 
      return $http({method: 'GET', url: '/myUrl'}) 
       .then (function (data) { 
        return doSomeStuffFirst(data); 
       } 
      ); 
     } 
    } 
}); 

Держу пари, при использовании resolve и первый вариант (с использованием $routeChangeStart и $viewContentLoaded установить и удалить кок) вещи будут работать намного лучше, чем сейчас.

Answer 2

Создать DIV в вашем веб-приложение, где вы хотите, чтобы отобразить счетчик.

использовать нг-шоу = "загрузки"

До вашего запроса множества $ scope.loading = истина; затем создайте предложение AngularJS, которое (используя .then() или .finally()) и в этом .finally() помещает $ scope.loading = false;

Таким образом, он показывает ваш прядильщик, когда он загружается, и когда он наконец-то завершен, он устанавливает значение false, которое не позволяет отображать его.

Answer 3

Посмотрите на angular-block-ui, который является модулем, который заботится о отображении загрузки индикатор. Блокировка может выполняться на всей странице или на отдельных элементах.За кулисами он отслеживает http-запросы и определяет, должен ли блок быть активным (он игнорирует кэшированные HTTP-запросы).