0

Как сделать загрузочный экран пока angular не загрузит всех данных ?

Создать скрипт который будет вешать картинку на все body и засунуть его в head.

Но как проверить что ангуляр загружен (то есть все модули, контроллеры выполнены) ? И уже на это событие снять тот блок с картинкой

3
  • ng-cloak скрывает элемент пока биндинг не отработал
    – Grundy
    29 янв 2016 в 10:29
  • Это я знаю, но я хочу сделать загрузочный экран, мол, подождите сайт загружается, и когда angular уже полностью выполнил все компоненты, все проинициализировал снять его, чтобы не приходилось везьде писать ng-cloak или через ng-bind, чтобы не было пустого сайта 29 янв 2016 в 10:31
  • stackoverflow.com/questions/21294917/…
    – Grundy
    29 янв 2016 в 10:36

1 ответ 1

1

1 вариант. Можно сделать как подложку изображение в gif вынесенный за ng-view или ui-view. Когда контент подгрузится он закроет эту картинку.

<div ui-view></div>
<div class="page-loading"></div>

2 вариант. Отследить событие на $rootScope.
Для ng-view соответственно

$rootScope.$on('$routeChangeSuccess', function() {
  $('.page-loading').hide();
});

Для ui-view соответственно

$rootScope.$on('$stateChangeSuccess', function() {
  $('.page-loading').hide();
});

Если работа с Jquery соответственно в общей директиве ко всему сайту.

7
  • а если нет ng-view или ui-view? Ну и использовать jQuery напрямую в angular - не очень хорошо, для этого в ангуляре есть встроенные средства
    – Grundy
    31 янв 2016 в 8:43
  • @Grundy можно использовать JqLite, можно просто повесить ng-show на иконку загрузки, вариантов масса. Конечно лучше без jquery. Если нет ui-view и ng-view, можно использовать $timeout, который отработает после отображения всех директив
    – Namig
    31 янв 2016 в 22:32
  • можете пояснить Если работа с Jquery соответственно в общей директиве ко всему сайту.? вы его применяете не в директиве
    – Grundy
    1 фев 2016 в 6:22
  • @Grundy почему не в общей директиве? Если загрузочная иконка нужна на всех страницах
    – Namig
    1 фев 2016 в 8:20
  • $rootScope.$on - Это директива?
    – Grundy
    1 фев 2016 в 8:21

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.