Download as PDF, PPTX
![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'.......](https://image.slidesharecdn.com/angularjswp30june-150702072424-lva1-app6891/75/Animation-And-Testing-In-AngularJS-3-2048.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](https://image.slidesharecdn.com/angularjswp30june-150702072424-lva1-app6891/75/Animation-And-Testing-In-AngularJS-4-2048.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](https://image.slidesharecdn.com/angularjswp30june-150702072424-lva1-app6891/75/Animation-And-Testing-In-AngularJS-7-2048.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.](https://image.slidesharecdn.com/angularjswp30june-150702072424-lva1-app6891/75/Animation-And-Testing-In-AngularJS-10-2048.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'] );](https://image.slidesharecdn.com/angularjswp30june-150702072424-lva1-app6891/75/Animation-And-Testing-In-AngularJS-12-2048.jpg)
Uploaded byEdureka!
Animation And Testing In AngularJS
This document contains slides from an AngularJS training course offered by Edureka. The course covers topics such as two-way data binding, AngularUI for user interfaces, ngAnimate for animation, and testing in AngularJS. It describes how to use AngularUI and ngAnimate directives and discusses different approaches to unit testing like manual testing versus automated testing. The course aims to help students understand and apply key AngularJS concepts.
Animation And Testing In AngularJS
- 1. www.edureka.co/angular-js View AngularJS coursedetails 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 : sales@edureka.co Animation And Testing In Angular JS
- 2. Slide 2 www.edureka.co/angular-jsSlide2 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
- 3. Slide 3 www.edureka.co/angular-jsSlide3 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'.......
- 4. Slide 4 www.edureka.co/angular-jsSlide4 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
- 5. Slide 5 www.edureka.co/angular-jsSlide5 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
- 6. Slide 6 www.edureka.co/angular-jsSlide6Slide 6Slide 6 Putting Everything Together How to bring relation between Model, Controller and Templates in the application?
- 7. Slide 7 www.edureka.co/angular-jsSlide7Slide 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
- 8. Slide 8 www.edureka.co/angular-jsSlide8Slide 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
- 9. Slide 9 www.edureka.co/angular-js AngularUIfor 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.
- 10. Slide 10 www.edureka.co/angular-js Howto 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.
- 11. Slide 11 www.edureka.co/angular-js ngAnimatefor 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.
- 12. Slide 12 www.edureka.co/angular-js Howto 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'] );
- 13. Slide 13 www.edureka.co/angular-js Howit 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.
- 14. Slide 14 www.edureka.co/angular-js EdurekangAnimate Blog Visit: http://www.edureka.co/blog/animating-angular-apps-with-nganimate
- 15. Slide 15 www.edureka.co/angular-jsSlide15 Unit Testing
- 16. Slide 16 www.edureka.co/angular-jsSlide16 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
- 17. Slide 17 www.edureka.co/angular-jsSlide17 Unit Testing With Angular.js Add Test Watch Test Fail Watch Code Run Test Refactor
- 18. Slide 18 www.edureka.co/angular-js CourseTopics 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
- 19. Slide 19 www.edureka.co/angular-js LIVEOnline Class Class Recording in LMS 24/7 Post Class Support Module Wise Quiz Project Work Verifiable Certificate Course Features
- 20.
- 21.