Animating AngularJS Apps With ngAnimate
AngularJS is a superheroic JavaScript framework which makes creating Single Page Applications (SPA) very easy. On top of that AngularJS comes with a handful of angular modules that can be used to create an awesome user experience. In this post we are going to see how to use popular ngAnimate to add page transitions/animations to angular views.
ngAnimate can be used with various directives like ngRepeat, ngView, ngInclude, ngIf, ngMessage etc.
In this post we will use animations with ngView
Here we are using Brackets IDE from Adobe, but you are free to use others, for example, Sublime Text, WebStorm from JetBrains etc.
Note : We will also use Bootswatch Bootstrap API to give our HTML pages a beautiful look
Project Structure :
Below is the project structure in Brackets IDE
Here is the short description of each file used in the project
animation.css – main CSS file where we define our page animations
bootstrap.min.css – bootswatch bootstrap for giving our <a> tags a beautiful look
config.js – main JavaScript file where we define our angular module along with routes and controllers
shellPage.html – This is the shell page in which other views will be loaded dynamically
Get Emulation Software Technologies Pvt. Ltd.’s stories in your inbox
Join Medium for free to get updates from this writer.
view1.html, view2.html, view3.html – These are the partial views which will be loaded into the shellPage
How are animations applied:
ngAnimate applies CSS classes to different Angular directives depending on whether they are entering or leaving the view
.ng-enter – This CSS class applies on the directive whenever it gets loaded in the page
.ng-leave – This CSS class applies on the directive whenever it leaves the page
Let’s go through each file one by one
shellPage.html
shellPage loads the required resources, applies ng-app to body and adds ng-view to inject the views dynamically.
< html>
< head>
< !-- Main CSS style where we define our animations -->
< link rel="stylesheet" href="css/animation.css">
< !-- Bootswatch Bootstrap to give our pages (buttons) beautiful look -->
