angularjs
TRANSCRIPT
![Page 1: AngularJS](https://reader035.vdocuments.mx/reader035/viewer/2022062512/55498b9cb4c905c26a8b50ce/html5/thumbnails/1.jpg)
LEARNING & DEVELOPMENT
![Page 2: AngularJS](https://reader035.vdocuments.mx/reader035/viewer/2022062512/55498b9cb4c905c26a8b50ce/html5/thumbnails/2.jpg)
■Open-source JavaScript framework.■Developed in 2009 by Miško Hevery and Adam Abrons.■Maintained by Google.■Browser Based (Client Side JavaScript) MVC
WHAT IS ANGULARJS ?
![Page 3: AngularJS](https://reader035.vdocuments.mx/reader035/viewer/2022062512/55498b9cb4c905c26a8b50ce/html5/thumbnails/3.jpg)
Current State of Browser And Web Application Development
User :)Developer :( Complexity Kills
![Page 4: AngularJS](https://reader035.vdocuments.mx/reader035/viewer/2022062512/55498b9cb4c905c26a8b50ce/html5/thumbnails/4.jpg)
![Page 5: AngularJS](https://reader035.vdocuments.mx/reader035/viewer/2022062512/55498b9cb4c905c26a8b50ce/html5/thumbnails/5.jpg)
![Page 6: AngularJS](https://reader035.vdocuments.mx/reader035/viewer/2022062512/55498b9cb4c905c26a8b50ce/html5/thumbnails/6.jpg)
![Page 7: AngularJS](https://reader035.vdocuments.mx/reader035/viewer/2022062512/55498b9cb4c905c26a8b50ce/html5/thumbnails/7.jpg)
HTML is great for static pages, but when it come to web applications its doesnt mold well (Dynamic Contents, Animations).This gap is filled by various JavaScript Libraries, As a result the more functionalities you add , you are bringing more JS.Nothing Bad in this Concept , but imagine if html elements declaratively apply for logic and functions, then
WHY ANGULARJS ?
❖Our html code would be self documenting itself❖High Amount of Reduction in JavaScript Code❖Easy for Maintaining and Extending
![Page 8: AngularJS](https://reader035.vdocuments.mx/reader035/viewer/2022062512/55498b9cb4c905c26a8b50ce/html5/thumbnails/8.jpg)
![Page 9: AngularJS](https://reader035.vdocuments.mx/reader035/viewer/2022062512/55498b9cb4c905c26a8b50ce/html5/thumbnails/9.jpg)
Wow Less JavaScript Less Headache, But Wait Aren’t We talking about a JavaScript Framework ??
![Page 10: AngularJS](https://reader035.vdocuments.mx/reader035/viewer/2022062512/55498b9cb4c905c26a8b50ce/html5/thumbnails/10.jpg)
Before Going in And Digging Much More into AngularJS, just take a note of its competitors or fellow MVC Javascript FrameWorks.
Have Listed Just 4 Popular Ones , there are few more
![Page 11: AngularJS](https://reader035.vdocuments.mx/reader035/viewer/2022062512/55498b9cb4c905c26a8b50ce/html5/thumbnails/11.jpg)
Additional Benefits of Using AngularJS
❖Less Boilerplate code❖Separation of concerns❖Uses JQLite (a subset of jQuery) for DOM manipulation, if
we include jQuery before AngularJS , it will be used instead of JQLite
❖Testing is a First Class Citizen❖Validation and Dependency Injection❖Two Way Data Binding ( And Many More …………….)
![Page 12: AngularJS](https://reader035.vdocuments.mx/reader035/viewer/2022062512/55498b9cb4c905c26a8b50ce/html5/thumbnails/12.jpg)
![Page 13: AngularJS](https://reader035.vdocuments.mx/reader035/viewer/2022062512/55498b9cb4c905c26a8b50ce/html5/thumbnails/13.jpg)
Two Way Data Binding
❖View is updated automatically when model is changed.❖Model is updated automatically when a value in view has
changed.
![Page 14: AngularJS](https://reader035.vdocuments.mx/reader035/viewer/2022062512/55498b9cb4c905c26a8b50ce/html5/thumbnails/14.jpg)
Too Much Of Concepts till now.… Lets Break the Ice With Some Coding
![Page 15: AngularJS](https://reader035.vdocuments.mx/reader035/viewer/2022062512/55498b9cb4c905c26a8b50ce/html5/thumbnails/15.jpg)
DIRECTIVE AND DATA BINDING
DIRECTIVE
❖Teaching HTML New Tricks .❖Adding New Custom HTML Elements, Attributes, Classes And
Comments Which will perform Special Functions❖We have default directives and custom directives
![Page 16: AngularJS](https://reader035.vdocuments.mx/reader035/viewer/2022062512/55498b9cb4c905c26a8b50ce/html5/thumbnails/16.jpg)
![Page 17: AngularJS](https://reader035.vdocuments.mx/reader035/viewer/2022062512/55498b9cb4c905c26a8b50ce/html5/thumbnails/17.jpg)
![Page 18: AngularJS](https://reader035.vdocuments.mx/reader035/viewer/2022062512/55498b9cb4c905c26a8b50ce/html5/thumbnails/18.jpg)
ng-repeat
![Page 19: AngularJS](https://reader035.vdocuments.mx/reader035/viewer/2022062512/55498b9cb4c905c26a8b50ce/html5/thumbnails/19.jpg)
FILTERS
![Page 20: AngularJS](https://reader035.vdocuments.mx/reader035/viewer/2022062512/55498b9cb4c905c26a8b50ce/html5/thumbnails/20.jpg)
VIEW CONTROLLERS AND SCOPE
![Page 21: AngularJS](https://reader035.vdocuments.mx/reader035/viewer/2022062512/55498b9cb4c905c26a8b50ce/html5/thumbnails/21.jpg)
ng-controller
![Page 22: AngularJS](https://reader035.vdocuments.mx/reader035/viewer/2022062512/55498b9cb4c905c26a8b50ce/html5/thumbnails/22.jpg)
Lets Hit the Code
More Concepts To come in Demo App
![Page 23: AngularJS](https://reader035.vdocuments.mx/reader035/viewer/2022062512/55498b9cb4c905c26a8b50ce/html5/thumbnails/23.jpg)
![Page 24: AngularJS](https://reader035.vdocuments.mx/reader035/viewer/2022062512/55498b9cb4c905c26a8b50ce/html5/thumbnails/24.jpg)