Fire a callback when route is changed (animations, loaders etc) in AngularJS

Question

I am rather new to AngularJS.

When the route is changed, the ng-view changes content. What i would like to be able to do, is to hook on some behavior when the route changes.

1. I would like to be able to for example animate the view we're leaving (fading out, and sliding to the left) and when the next view is readily available, fade and slide the view in. This could be implemented by adding a class to body on route loading, and removing a class on route change successfull

2. I would like the ability to have the views stacked on to the right of the current view, so that when one moves forward, the next view is first loaded to the right of the current one, then the viewport slides to the right so the current view slides almost out of view, and the next one slides into view (windows phone like off canvas navigation)

Is the $routeProvider the right place to do this?

Are there any gurus out there that could point me in the right direction?

Answer 1

After some more research, there are events fired for this purpose.

$scope.$on('$routeChangeStart', function(scope, next, current){
   //...
});

$scope.$on('$routeChangeSuccess', function(scope, next, current){
   //...
});

If ones problem is to animate something (for example on route change) I recommend using ngAnimate. Read more about it here