In a previous post I mentioned a small but important change to routing in AngularJS 1.2+. Anytime you want to include routing, animations, and touch (to name just 3) you’ll need to load the appropriate script and reference the external module in your app’s module dependencies. For example, to include routing and animation support you’ll need to do the following in your module definition:

var app = angular.module('customersApp', ['ngRoute', 'ngAnimate']);

You’ll also need to include the angular-route.js and angular-animate.js scripts in your main page as well.

I recently updated an application that uses animations to slide views into a page using the ngView directive and thought I’d walk through the upgrade process. It only took about 5 minutes to change things over to the new animation technique now in AngularJS 1.2+.

The Original Code

The ngView directive in the main shell page looked like the following in the original code. Note the inclusion of the ngAnimate directive:

<div class="container">
    <div data-ng-view="" id="ng-view" data-ng-animate="{enter: 'view-enter'}"></div>
</div>

I had the following styles in a CSS stylesheet to handle the slide-in and slide-out animations:

#ng-view {
  position:relative;
  min-height:500px;
}

/* Animations */
.view-enter, .view-leave {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}

.view-enter {
  opacity:0;
  left:100px;
  width:100%;
  position:absolute;
}

.view-enter.view-enter-active {
  left:0;
  opacity:1;
}

.view-leave {
  position:absolute;
  left:0;
  width:100%;
  opacity:1;
}

.view-leave.view-leave-active {
  left:-100px;
  opacity:0;
}

The New Code

To upgrade the code to AngularJS 1.2+ I had to remove the ngAnimate directive (it’s been deprecated in 1.2+) and add a class instead. I like this approach because it’s a lot cleaner overall. Here’s what the ngView directive looks like in the upgraded application:

<div class="container">
    <div data-ng-view="" id="ng-view" class="slide-animation"></div>
</div>

The CSS was changed to the following (I made a few tweaks here and there as well):

#ng-view {
  position:relative;
}

/* Animations */
.slide-animation.ng-enter, .slide-animation.ng-leave {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;

  position:absolute;
  top:0;
  left:0;
  right:0;
  min-height:1000px;
}

.slide-animation.ng-enter {
  opacity:0;
  left:100px;
}

.slide-animation.ng-enter.ng-enter-active {
  left:0;
  opacity:1;
}

.slide-animation.ng-leave {
  left:0;
  opacity:1;
}

.slide-animation.ng-leave.ng-leave-active {
  left:-100px;
  opacity:0;
}

Notice that the slide-animation class shown earlier on the ngView directive prefixes the various selectors for ng-enter and ng-leave:

Matias Niemelā (the main dev behind AngularJS animation functionality) has an excellent post on the subject if you’d like more detail on animations and how they can be used with various directives.

Check out my other posts on AngularJS