Chapter 9 ■ angularJS animationThis next line is the one that ties it all together. Note that the ngInclude directive uses the expression
template.url. This will evaluate to the currently selected templates URL property.
Let’s not forget the all-important step of hooking our CSS into the ngInclude directive, by setting the class name.
If you have re-created these files in your AngularJS folder, you should be able to open them and see the
animations in action. Remember, I haven’t used vendor prefixes here, so you may have to add them, if you are using a
browser that requires them. As I mentioned, if you are deploying any CSS animations in your own projects, you should
be using the vendor prefixes. (I was using Chrome Version 37.0.2062.124 to run them as is.)
Summary
In this chapter, we studied how the ngAnimate module works. We saw that it is slightly unusual in that we do not
directly interact with the $animate service, but we also saw that the hook system is quite easy to use, and it allows us
the freedom to power our animations using CSS.
Hands-on experimentation is the key to learning most new languages, frameworks, and libraries, but I’ve found
that this applies doubly in the case of learning to animate in Angular. It isn’t difficult, but there are a few moving parts
that are well worth exploring and tinkering with.
We only scratched the surface of what’s possible with Angular animation, but it’s quite likely that you won’t need
to dig too much deeper in order to do some productive work, particularly if you are already fairly handy with CSS and
know your way around CSS3 animation. In most cases, you don’t really want to get animation crazy. Usually, all you
want to do is subtly draw the user’s attention to the fact that something has changed.