Не лагающий анимированный переход между страницами в Angular?

Question

[Greg Popov]

Нашел одно верное решение с помощью ngAnimate, но:

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

2. При анимированном подходе смены страниц нужно подкручивать их на начало. Как это ПРАВИЛЬНО реализовать.

Заранее спасибо.

Answer 1

[Николай]

Прелоадер можно показывать через комбинацию onRouteChangeStart и параметра resolve в route.
То есть в resolve возвращаем Promise, который грузит контент, и RouteChangeSuccess не произойдет, пока Promise не срезолвится. Вот здесь неплохая статья про resolve: ode2code
Прокрутку можно добавить в событие onRouteChangeSuccess например. Не очень понятно, что именно вы имеете ввиду под прокруткой, пример был бы очень кстати.
По поводу медленного интернета: имеет смысл упаковать все темплейты в .js файл. Для grunt'а есть вот такая штука: github. Она собирает темплейты в js файл и засовывает их в templateCache ангуляра. Будет небольшой оверхед при старте, но дополнительной подгрузки при первом использовании темплейта уже не будет.

Comments

[Greg Popov]

Имеется в виду то, что механизм работы ngAnimate при перемене темплейтов таков: навешивается класс ng-leave и ng-enter, от этого не перезагружается страница, и темплейт виден на том уровне, дл куда юзер докрутил на прошлом.

Нужно перед подгрузкой нового темплейта незаметно дернуть новый темплейт на top: 0