Animation And Testing In AngularJS

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

http://www.edureka.co/angular-js

mailto:[email protected]

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


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'.......


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


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

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?


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


<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

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.


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.


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.


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'] );


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.


Edureka ngAnimate Blog

Visit: http://www.edureka.co/blog/animating-angular-apps-with-nganimate

http://www.edureka.co/blog/animating-angular-apps-with-nganimate


Unit Testing


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


Unit Testing With Angular.js

Add Test

Watch Test Fail

Watch Code

Run Test

Refactor


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


LIVE Online Class

Class Recording in LMS

24/7 Post Class Support

Module Wise Quiz

Project Work

Verifiable Certificate

Course Features


Questions


Documents

Animation And Testing In AngularJS