Loading page with AngularJS routes

I want to use Angular routes for creating small website for mobile. Is there any way to add loading icon while loading a partial and swap the entire page to the right when switching? (like in native mobile app animation

But change:

  • $beginRouteChange to $routeChangeStart
  • $endRouteChange to $routeChangeSuccess

and things will work.

Check out Misko's answer about delaying route changing. He links to an example, too which is helpful. Basically, you have to add to your routing logic a resolve function which will allow you to prevent showing of the new route until asynchronous calls are resolved, and observing the $beginRouteChange and $endRouteChange on the $rootScope (example code here)