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:
<head runat="server">
<title></title>
<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
</head>
Step 2
Now I will work on the View of this application, in other words on the JavaScript part of this application.
<script>
angular.module('animate', [
]).controller('animateCtrl', function (
$scope
) {
$scope.names = [{
name: 'Mohit'
}, {
name: 'Anubhav'
}];
$scope.insert = function () {
$scope.names.push({
name: 'Anubhav'
});
};
});
</script>
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
<body ng-controller="animateCtrl">
<div>
<button ng-click="insert()">Add More Anubhav</button>
<ul>
<li ng-repeat="user in names" ng-animate="{enter: 'animated flip'}">
<a>{{user.name}}</a>
</li>
</ul>
</div>
</body>
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.
In the ng-animate I passed "enter:'animated flip'", this is a type of Animation that will be shown when amaking a new entry using the click of a button.
Now our application is created and is ready for execution.
Output
On running the application you will get an output like this one:
![nganimate]()
Now as I click on the Button then a new name will be added with this Animation:
![nganimate]()
The complete code of this application is as follows:
<html ng-app="animate" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="https://rawgithub.com/daneden/animate.css/master/animate.css">
<style>
a {
font-size: 300%;
}
</style>
<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script>
angular.module('animate', [
]).controller('animateCtrl', function (
$scope
) {
$scope.names = [{
name: 'Mohit'
}, {
name: 'Anubhav'
}];
$scope.insert = function () {
$scope.names.push({
name: 'Anubhav'
});
};
});
</script>
</head>
<body ng-controller="animateCtrl">
<div>
<button ng-click="insert()">Add More Anubhav</button>
<ul>
<li ng-repeat="user in names" ng-animate="{enter: 'animated flip'}">
<a>{{user.name}}</a>
</li>
</ul>
</div>
</body>
</html>