www.edureka.co/angular-js View AngularJS course details at www.edureka.co/angular-js For Queries: Post on Twitter @edurekaIN: #askEdureka Post on Facebook /edurekaIN For more details please contact us: US : 1800 275 9730 (toll free) INDIA : +91 88808 62004 Email us : [email protected]Animation And Testing In Angular JS
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
www.edureka.co/angular-js
View AngularJS course details at www.edureka.co/angular-js
For Queries:Post on Twitter @edurekaIN: #askEdurekaPost on Facebook /edurekaIN
For more details please contact us: US : 1800 275 9730 (toll free)INDIA : +91 88808 62004Email us : [email protected]
ui.bootstrap module will be having all bootstrap functionalities as directives and services. Once it is injected into our application, we can access all the bootstrap modules.
Slide 11 www.edureka.co/angular-js
ngAnimate for Animation
The ngAnimate module provides support for CSS-based animations as well as JavaScript-based animations.
Animations are not available unless you include the ngAnimate module as a dependency within your application.
ngAnimate can be used with various directives like ngRepeat, ngView, ngInclude, ngIf, ngMessage etc.
Slide 12 www.edureka.co/angular-js
How to use ngAnimate
Download and include ng-animate js file to main html.
Add ngAnimate as a dependency to angular application.
e.g : angular.module( ‘demo’ , ['ngAnimate'] );
Slide 13 www.edureka.co/angular-js
How it works
Once ngAnimate injected we can use animations by using CSS or JavaScript.
For both CSS and JS animations the sole requirement is to have a matching CSS class that exists both in the registered animation and within the HTML element that the animation will be triggered on.
ngAnimate is supported in following modules : ngRepeat, ngShow, ngHide, ngIf, ng-view etc.
CSS based animation :
CSS-based animations require no JavaScript code. By using a CSS class that we reference between our HTML and CSS code we can create an animation that will be picked up by Angular when an the underlying directive performs an operation.
JavaScript based animation :
ngAnimate also allows for animations to be consumed by JavaScript code. By making use of the module.animation() module function we can register the animation.