Как сделать прелоадер перед загрузкой приложения angular.js?

Question

[Айдар]

Здравствуйте! Как сделать прелоадер перед загрузкой содержимого страницы. На примере простого блока с текстом. Т.е. перед тем как увидеть текст,нужно поверх всей страницы "покрутить" прелоадер.
Если честно с прелоадерами вплотную только сейчас заинтересовался...до этого не нужны были.
Весь вопрос в том,как скрыть блок и показать прелоадер,а потом наоборот. Живой пример бы,а там разберусь.
Например jsfiddle.net/xfuf045q/9

Answer 1

[SirMustache]

Например так: jsfiddle.net/a8zxk26o

Comments

[Айдар]

SirMustache решение хорошее. Но в вашем коде я увидел ng-cloak,как и предложиил napa3um
Поставил ngCloak просто в главный div типа:

div ng-app="app" ng-controller="MyController" ng-cloak

и все норм. Т.е. пока не загрузится все содержимое ничего не показывает. Только вот теперь как повесить на этот ng-cloak прелоадер? В вашем примере идет задержка по таймеру и это тоже выход. Есть ли событие при котором можно отследить когда ngcloak активен?

Идея такая....запихать прелоадер над блоком ng-cloak и крутить его пока ангуляр грузит контент,как только контент загружен на прелоадер вешаем ng-hide="true

[SirMustache]

Айдар: Директива ng-cloak скрывает содержимое пока не загрузится ангуляр приложение, например чтобы не показывать голые темплейты без данных. $timeout В коде только для того, чтобы эмулировать загрузку, так как приложение в примере грузится мгновенно и никакого прелоадера мы не увидим. То есть код должен выглядеть приблизительно так: jsfiddle.net/Lka0jdsu Внутри контроллера у нас есть метод init(), в нашем случае он только проставляет значение для переменной isReady на true, на котором мы и завязывает логику во вьюхе с прелоадером (ng-hide="vm.isReady"), то есть когда вьюха увидит значение isReady - это значит, что приложение загружено и готово к работе.
Вот пример с загрузкой реальных данных(все равно очень бысто): jsfiddle.net/opqyqaug

[Айдар]

SirMustache: ну да...вы правы на счет быстрой загрузки. Суть анимации теряется или вообще воспринимается как глюк. Тут нашел еще один способ codepen.io/garethdweaver/pen/PqKLyB
Только там по клику....нужно через $timeout

[Айдар]

SirMustache ,весь затык в этом

(function() {
document.onclick = function() {
return angular.bootstrap(document.body, []);
};

}).call(this);

[SirMustache]

Айдар: быстрая загрузка - это не минус, а как раз то, за что борятся все разработчики :). Прелоадер как раз нужен на случай, если она не быстрая. Если не нравится прятать её через ng-hide, можно вешать класс с анимацией например, вариантов много: jsfiddle.net/fugyd137

[Айдар]

SirMustache: точно! Мне же только визуализация нужна....стальное если что ng-cloak прикроет. Спасибо вам...за наводку keyframes сделал так jsfiddle.net/fugyd137/2
Визуализация есть и ладно)))))

Answer 2

[napa3um]

https://docs.angularjs.org/api/ng/directive/ngCloak

Answer 3

[Игорь Морев]

Смотрите в сторону событий, ajax запросов. Перед началом запроса создаёте переменную в scope текущего контроллера со значением false, а при завершении true. А уже во view показываете/скрываете блок в зависимости от значения переменной.