How to implement scalable page switching using AngularJS_AngularJS

AngularJS 1.2 makes it easier to create page-to-page transitions in a single-page application by introducing pure CSS class-based transitions and animations. Using just an ng-view, let's take a look at a scalable approach that introduces numerous different transitions and how each page can be transitioned in and out.

Demo: http://embed.plnkr.co/PqhvmW/preview

First, tag:

 <div class="page-container">
  <div ng-view class="page-view" ng-class="pageAnimationClass"> </div>
 </div>

Since ng-view uses enter/leave animation, you can simply use two ng-view elements in the DOM to switch in the new view and switch out the old view. Therefore, we use absolute positioning to establish ng-view in the page-container element that uses relative positioning, thereby supporting any kind of positioning switching.

'go' method

In a single-page application, we still want to enable navigation via URLs and ensure that the browser's back and next buttons work as expected. So once we set up our routes, templates, and controllers (optional parsing) in $routeProvider, we can use a relative path in an ng-click to switch pages directly:

 <a ng-click="/page2">Go to page 2</a>

That also works, but we need to hardcode a class switch in ng-view. Instead, let's create a 'go' method on $rootScope that lets us specify a path and a toggle like this:

 <a ng-click="go('/page2', 'slideLeft')">Go to page 2</a>

This is our $rootScope 'go' method:

$rootScope.go = function (path, pageAnimationClass) {
 
  if (typeof(pageAnimationClass) === 'undefined') { // Use a default, your choice
    $rootScope.pageAnimationClass = 'crossFade';
  }
     
  else { // Use the specified animation
    $rootScope.pageAnimationClass = pageAnimationClass;
  }
 
  if (path === 'back') { // Allow a 'back' keyword to go to previous page
    $window.history.back();
  }
     
  else { // Go to the specified path
    $location.path(path);
  }
};

Now, any toggle class you specified as the second parameter will be added to ng-view and the go method will change the page path with the specified first parameter.

Switch class

The next thing to do is to create any number of toggle classes and use the hooks provided by the ngAnimate module , for example:

/* slideLeft */
.slideLeft {
  transition-timing-function: ease;
  transition-duration: 250ms;
}
 
.slideLeft.ng-enter {
  transition-property: none;
  transform: translate3d(100%,0,0);
}
 
.slideLeft.ng-enter.ng-enter-active {
  transition-property: all;
  transform: translate3d(0,0,0);
}
 
.slideLeft.ng-leave {
  transition-property: all;
  transform: translate3d(0,0,0);
}
 
.slideLeft.ng-leave.ng-leave-active {
  transition-property: all;
  transform: translate3d(-100%,0,0);
}