Add Animation To Your Application Using AngularJS

Introduction

This article explains how to add Animation to your application using AngularJS.

Angular 1.1.5 provides a directive known as ng-animate, this directive is used to add animation to a application, but Angular 1.2 has changed everything and doesn't support ng-animate.

This article uses Angular 1.1.5, the previous version of Angular, so if you are adding Angular 1.2 then you need to remove this JS file and need to add 1.1.5 or it's reference to your application.

Step 1

First you need to add angular 1.1.5, this can be either downloaded from the Angular official website or you can add this reference to the head section of your application:

Step 2

Now I will work on the View of this application, in other words on the JavaScript part of this application.

Here I have created an Angular.module named "animate", in this module I have created a controller named "animateCtrl".

In this Controller function I have provided some Initial name.

After this I had created a function that will insert a new name in the list of names.

Now our work on View is completed and we can move toward the View Model in other words on the HTML part.

Step 3

Here I had bound the body section with the controller "animateCtrl" using the ng-controller.

After this I took a button, the click of this button is bound with the insert() function using ng-click.

At the end I created a List bound with the names passed in the controller, this is a dynamic list created by ng-repeat. User. name will help to show the data in each new row of the list.