10

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?

Kenneth Lynne
  • 15,461
  • 12
  • 63
  • 79

2 Answers2

12

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

Kenneth Lynne
  • 15,461
  • 12
  • 63
  • 79
  • 2
    We are seeing that the DOM isn't typically fully hydrated with the path template when '$routeChangeSuccess' fires. – deepelement Mar 31 '14 at 11:55
3

You can install a watch at root scope level to catch location changing:

$rootScope.$watch(function {
   return $location.path();
   },  
   function(newValue, oldValue) {  
      if (newValue != oldvalue) {
         // here you can do your tasks
      }
      else {
      }
   },
   true);
remigio
  • 4,101
  • 1
  • 26
  • 28
  • Thanks for your answer, but I'm left wondering how to do an animation on any div, or for example ng-view. What is the best way to for example add a class to body, and remove it when loading is finished, to do some basic CSS transitions between states? – Kenneth Lynne Feb 18 '13 at 23:43
  • Seems you've found an answer by yourself, anyway sorry I can't help you, I don't know much about web interface effects – remigio Feb 19 '13 at 09:03