MEAN Machine - A beginner's practical guide to the JavaScript stack (2015)

Animating Angular Applications

What’s the point in creating these great single page applications if they don’t act like it? We want our applications to act as similar to native applications as possible so that we can blur the lines between web and native applications and impress our users even further.

AngularJS provides a great way to create single page applications. This allows for our site to feel more and more like a native mobile application since we have a single page app. To make it feel even more native, we can add transitions and animations using ngAnimate module.

This module allows us to create beautiful looking applications and we’ll be looking at how to animate ng-view.

Animating Our Routing Application

We are going to animate the single page application we built in the last chapter. Thanks to our routing, our site will not refresh as people click between pages. Now we will:

· have ngRoute handle our routing (done in the last chapter)

· use ngAnimate to create page animations

· use CSS animations to handle page animations

Before we can get to the animations, let’s talk a bit about how the ngAnimate module works.

How Does the ngAnimate Module Work?

ngAnimate will add and remove CSS classes to different Angular directives based on if they are entering or leaving the view. This happens automatically without us needing to configure anything.

The classes that are added and removed automatically when we load up our site are .ng-enter or .ng-leave. These are applied to the div where we apply the ng-view directive. We won’t see these yet, but if you go into your browser inspector when you are clicking between pages, you’ll see the .ng-enter and .ng-leave classes being applied.

How Animations Are Applied

This module keeps things clean and simple. All it does is add classes. How does it create animations though? It actually doesn’t. It gives us the tools to do so and then we are in control of the animations by creating CSS animations. By using CSS animations, we ensure that our application can work in mobile browsers, desktop browsers, and is adheres to the latest standards (CSS3).

We’ll be using CSS animations from the Animate.css project since those classes are easily taken into our own projects.

Directives that Use Animation

ngAnimate also applies these classes to more Angular directives automatically. In addition to the ngView module, these classes are also applied to ngRepeat, ngInclude, ngIf, ngSwitch, ngShow, ngHide, ngView, and ngClass. This means that you can animate multiple parts of your application. We’ll be focusing on ngView in this chapter, but the tactics can be easily applied to the other directives.

Animating Our Routing Application

There are three steps to using the ngAnimate module inside of our application from the last chapter:

1. Link to the angular-animate.js file

2. Inject the ngAnimate module into our main Angular module

3. Add the animate.css stylesheet to have prebuilt CSS animations

We’ll use a CDN for the angular-animate.js and animate.css resources that we need. Go back into your index.html file and add the two resources to the <head> of your document.

1 <head>

2 <meta charset="utf-8">

3 <title>My Routing App!</title>

5 

6 <base href="/">

8 

9 

10 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/\

11 css/bootstrap.min.css">

12 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0\

13 .0/css/font-awesome.css">

14 <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/animate.c\

15 ss/3.1.1/animate.min.css">

17 <style>

18 body { padding-top:50px; }

19 </style>

21 

22 

23 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"\

24 ></script>

25 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.j\

26 s"></script>

27 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-animate\

28 .js"></script>

30 <script src="js/app.js"></script>

31 <script src="js/app.routes.js"></script>

32 </head>

The two main lines that we are looking to add here are for animate.css and angular-animate.js:

1 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/\

2 animate.min.css">

3 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-animate.js"\

4 ></script>

With the resources we now need, inside of our app.js file where we defined our main Angular module (angular.module('routerApp', ['routerRoutes']), we will need to inject the ngAnimate module. Without injecting the module into our application, we won’t be able to use it. This is once again the Angular dependency concepts in action.

Injecting the ngAnimate Module

To inject the ngAnimate module, we’ll follow the same process that we used to inject our routerRoutes module. Just add it when declaring the angular.module().

Here’s the module injected in our app.js file:

1 angular.module('routerApp', ['routerRoutes', 'ngAnimate'])

Now when we start up our application and inspect element in our browser, we can see the ng-enter and ng-leave classes being applied. This won’t affect how our application looks or feels… yet. We just need to apply CSS animations now.

CSS Animations and Positioning

In our last chapter, we had all of our custom CSS (just the 1 line for body padding) inline in our index.html file. Let’s move that into its own file now. Inside of the public folder, create a ‘public/css/style.css’ file. We will add that to our index.html file instead of the inline file:

1 <link rel="stylesheet" href="css/style.css">

The other change that we will make is to wrap our <div ng-view></div> with another div so that we can call it specifically. This will look like so:

1 <div id="content-views">

2 <div ng-view></div>

3 </div>

Now we just need to go into our newly created stylesheet and add our styles. Don’t forget to link your stylesheet ‘<link rel="stylesheet" href="css/style.css" />’ in your index.html.

1 body { padding-top:50px; }

3 #content-views { position:relative; }

5 .ng-enter, .ng-leave { width:100%; position:absolute; }

6 .ng-enter {

7 -webkit-animation:zoomInDown 1.2s both ease-in;

8 -moz-animation:zoomInDown 1.2s both ease-in;

9 animation:zoomInDown 1.2s both ease-in;

10 }

11 .ng-leave {

12 -webkit-animation:zoomOutDown 0.5s both ease-in;

13 -moz-animation:zoomOutDown 0.5s both ease-in;

14 animation:zoomOutDown 0.5s both ease-in;

15 }

Vendor Prefixes: Make sure you add the -moz-animation and -webkit-animation vendor prefixes when pushing this code to production for cross compatibility in browsers.

Go ahead and click through the pages in your application and watch as the pages fly out and fly in! Just like that, we have an animated application! Feel free to try out the rest of the animate.css classes to see the crazy different effects you can create.

Conclusion

This should give you just a sample of how putting together the Angular routing and animating modules together can quickly build complex looking apps. These techniques can be used to build a multitude of applications in all sorts of different styles. So far, on the Angular side of things we have:

· Set up an AngularJS module

· Applied Angular to our HTML views

· Routed our application using ngRoute

· Animated our application using ngAnimate and CSS classes

Having the knowledge of the above will let us build awesome looking applications. We’ll explore these concepts further as we build out more sample applications in the coming chapters.

We’ve focused on the frontend Angular parts so far; next up is how to make Angular applications dynamic. We’ll be moving towards integrating the frontend and the backend, but first let’s make sure that the foundation of our application is solid so that our applications are scalable and easy to understand.