animation and testing in angularjs
TRANSCRIPT
![Page 1: Animation And Testing In AngularJS](https://reader034.vdocument.in/reader034/viewer/2022042615/55ccd0aebb61eb13528b462b/html5/thumbnails/1.jpg)
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]
Animation And Testing In Angular JS
![Page 2: Animation And Testing In AngularJS](https://reader034.vdocument.in/reader034/viewer/2022042615/55ccd0aebb61eb13528b462b/html5/thumbnails/2.jpg)
Slide 2 www.edureka.co/angular-jsSlide 2
Objectives
At the end of this module, you will be able to understand:
Two Way Data Binding
AngularUI for User Interface
ngAnimate for Animation
Testing in AngularJS
![Page 3: Animation And Testing In AngularJS](https://reader034.vdocument.in/reader034/viewer/2022042615/55ccd0aebb61eb13528b462b/html5/thumbnails/3.jpg)
Slide 3 www.edureka.co/angular-jsSlide 3
Controllers in AngularJS define the workflow presentation logic
A JavaScript object
Created by a standard JavaScript object constructor
Attached to the view with ng-controller
Controllers can be defined in the application as shown
<div ng-controller=“MyController"><body ng-controller=“MyController">
Controllers
Defining Controller
Using Controller in application
var myApp = angular.module('myApp',[]);myApp.controller(‘MyController'.......
![Page 4: Animation And Testing In AngularJS](https://reader034.vdocument.in/reader034/viewer/2022042615/55ccd0aebb61eb13528b462b/html5/thumbnails/4.jpg)
Slide 4 www.edureka.co/angular-jsSlide 4
Injected as an argument to the controller function
Holds the model data required by the view
Binds data to the view using AngularJS two way data binding
Represented by $scope in the controller function and links the controller to the view
Figure shown is representation of scope
app.controller(‘MyController', ['$scope', function($scope) {…………………..]};}]);
Scopes
![Page 5: Animation And Testing In AngularJS](https://reader034.vdocument.in/reader034/viewer/2022042615/55ccd0aebb61eb13528b462b/html5/thumbnails/5.jpg)
Slide 5 www.edureka.co/angular-jsSlide 5
MODEL
AngularJS is a model driven application
A Model encapsulates the application data
Any change in the state, provides appropriate notifications to the controller and views
On notification views updates the output display of the application
Updating of view happens automatically with data bindings
TEMPLATE
Represents the model in the view and user interactions with application
Model and Template
![Page 6: Animation And Testing In AngularJS](https://reader034.vdocument.in/reader034/viewer/2022042615/55ccd0aebb61eb13528b462b/html5/thumbnails/6.jpg)
Slide 6 www.edureka.co/angular-jsSlide 6Slide 6Slide 6
Putting Everything Together
How to bring relation between Model, Controller and Templates in the application?
![Page 7: Animation And Testing In AngularJS](https://reader034.vdocument.in/reader034/viewer/2022042615/55ccd0aebb61eb13528b462b/html5/thumbnails/7.jpg)
Slide 7 www.edureka.co/angular-jsSlide 7Slide 7Slide 7
app.controller('ProductsController', ['$scope', function($scope) { $scope.product = {
id: 1,name: 'Smart Phones‘,type: ‘Mobile‘,stores: [
{ id: 1, name: 'Samsung Galaxy', quantity: 5},{ id: 2, name: 'Nokia', quantity: 3},{ id: 3, name: 'HTC', quantity: 6}
]};
}]);
Controller Scope Injection
Model
Controller Structure
![Page 8: Animation And Testing In AngularJS](https://reader034.vdocument.in/reader034/viewer/2022042615/55ccd0aebb61eb13528b462b/html5/thumbnails/8.jpg)
Slide 8 www.edureka.co/angular-jsSlide 8Slide 8Slide 8
<div ng-controller="ProductController"> Id: <span ng-bind="product.id"></span><br/>Name:<input type="text" ng-model="product.name" /><br/>Category: <input type="text" ng-model="product.type" />
</div>
Controller
AngularJS Binding
Model
Binds form control to property
Model Attribute
Two Way Data Binding
![Page 9: Animation And Testing In AngularJS](https://reader034.vdocument.in/reader034/viewer/2022042615/55ccd0aebb61eb13528b462b/html5/thumbnails/9.jpg)
Slide 9 www.edureka.co/angular-js
AngularUI for User Interface
In normal jQuery application, we will be including bootstrap js files to access the bootstrap functionalities like modal, accordion, datepicker, etc.,
We will be doing dom traversing to bind the event with dom element in jQuery.
Instead of doing DOM traversing, we will be creating custom directives in AngularJS to bind the events.
Angular UI will be having special set of directives to achieve bootstrap functionalities in angularJS app.
![Page 10: Animation And Testing In AngularJS](https://reader034.vdocument.in/reader034/viewer/2022042615/55ccd0aebb61eb13528b462b/html5/thumbnails/10.jpg)
Slide 10 www.edureka.co/angular-js
How to use AngularUI
Download required javascript, css files and include those in main html.
In angular module declare a ui.bootstrap as a dependency to your angular App.
e.g : - angular.module( ‘demo’ , ['ui.bootstrap'] );
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.
![Page 11: Animation And Testing In AngularJS](https://reader034.vdocument.in/reader034/viewer/2022042615/55ccd0aebb61eb13528b462b/html5/thumbnails/11.jpg)
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.
![Page 12: Animation And Testing In AngularJS](https://reader034.vdocument.in/reader034/viewer/2022042615/55ccd0aebb61eb13528b462b/html5/thumbnails/12.jpg)
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'] );
![Page 13: Animation And Testing In AngularJS](https://reader034.vdocument.in/reader034/viewer/2022042615/55ccd0aebb61eb13528b462b/html5/thumbnails/13.jpg)
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.
![Page 14: Animation And Testing In AngularJS](https://reader034.vdocument.in/reader034/viewer/2022042615/55ccd0aebb61eb13528b462b/html5/thumbnails/14.jpg)
Slide 14 www.edureka.co/angular-js
Edureka ngAnimate Blog
Visit: http://www.edureka.co/blog/animating-angular-apps-with-nganimate
![Page 15: Animation And Testing In AngularJS](https://reader034.vdocument.in/reader034/viewer/2022042615/55ccd0aebb61eb13528b462b/html5/thumbnails/15.jpg)
Slide 15 www.edureka.co/angular-jsSlide 15
Unit Testing
![Page 16: Animation And Testing In AngularJS](https://reader034.vdocument.in/reader034/viewer/2022042615/55ccd0aebb61eb13528b462b/html5/thumbnails/16.jpg)
Slide 16 www.edureka.co/angular-jsSlide 16
Manual Testing
Traditionally developers manually test their application
Manual testing is less efficient
Very difficult to track the test result
Very difficult to test all the pieces of code
Very difficult to test the integration of two ore more functions
Differs from one developer to another developer
![Page 17: Animation And Testing In AngularJS](https://reader034.vdocument.in/reader034/viewer/2022042615/55ccd0aebb61eb13528b462b/html5/thumbnails/17.jpg)
Slide 17 www.edureka.co/angular-jsSlide 17
Unit Testing With Angular.js
Add Test
Watch Test Fail
Watch Code
Run Test
Refactor
![Page 18: Animation And Testing In AngularJS](https://reader034.vdocument.in/reader034/viewer/2022042615/55ccd0aebb61eb13528b462b/html5/thumbnails/18.jpg)
Slide 18 www.edureka.co/angular-js
Course Topics
Module 1
» Introduction to JavaScript MVC Framework and AngularJS
Module 2
» Dependency Injection and Controllers
Module 3
» Route, Directive and Filters
Module 4
» Creating Custom Directives and Filters
Module 5
» Third-party AngularJS Modules and Testing Angular
Module 6
» AngularJS with Node.js, Yeoman and Rest Exposure
Module 7
» Project Discussion
![Page 19: Animation And Testing In AngularJS](https://reader034.vdocument.in/reader034/viewer/2022042615/55ccd0aebb61eb13528b462b/html5/thumbnails/19.jpg)
Slide 19 www.edureka.co/angular-js
LIVE Online Class
Class Recording in LMS
24/7 Post Class Support
Module Wise Quiz
Project Work
Verifiable Certificate
Course Features
![Page 20: Animation And Testing In AngularJS](https://reader034.vdocument.in/reader034/viewer/2022042615/55ccd0aebb61eb13528b462b/html5/thumbnails/20.jpg)
Slide 20 www.edureka.co/angular-js
Questions
![Page 21: Animation And Testing In AngularJS](https://reader034.vdocument.in/reader034/viewer/2022042615/55ccd0aebb61eb13528b462b/html5/thumbnails/21.jpg)
Slide 21 www.edureka.co/angular-js