Chapter 9
AngularJS Animation
Animating your page element can be fun, but it can be easy to get carried away. Of course, you should only use
animation to support your applications in a useful way. Subtly fading in messages or views, as opposed to having them
appear abruptly, can be a useful and less jarring experience for the user, in some contexts. Perhaps you may wish to
include a small scaling or transform effect to bring the user’s attention to some event that has occurred—a file upload
completing, for example. In this chapter, we will look at how to achieve such things. Ultimately, however, it is up to
you whether to use your new powers for good or evil.
The $animate service is the one Angular uses to bring your applications to life, though, as you will soon see, you
don’t interact with this service directly. Instead, Angular uses CSS and some naming conventions to make things
easier. Once you understand how this all works, you will be able to create a much richer user experience. However,
if you aren’t careful, you may also create a more annoying one!
Before we get started, we first must download the ngAnimate module. This is a very similar process to the one we
followed to download the ngRoute module in the last chapter.
Installing the ngAnimate Module
Angular’s animating capabilities reside within an optional module called ngAnimate, so we have to download this
before we can get started. Just as we did when we needed the ngRoute module, go to http://angularjs.org, click
Download, and select the version you require. (The code listings in this chapter use the 1.2.5 version.) Then click the
Browse additional modules link displayed next to Extras, as shown in Figure 9-1.