24
LEARNING & DEVELOPMENT

AngularJS

Embed Size (px)

Citation preview

Page 1: AngularJS

LEARNING & DEVELOPMENT

Page 2: AngularJS

 

■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

 

Current State of Browser And Web Application Development

User :)Developer :( Complexity Kills

Page 4: AngularJS

 

Page 5: AngularJS

 

Page 6: AngularJS

 

Page 7: AngularJS

 

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

 

Page 9: AngularJS

 

Wow Less JavaScript Less Headache, But Wait Aren’t We talking about a JavaScript Framework ??

Page 10: AngularJS

 

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

 

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

 

Page 13: AngularJS

 

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

 

Too Much Of Concepts till now.… Lets Break the Ice With Some Coding

Page 15: AngularJS

 

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

 

Page 17: AngularJS

 

Page 18: AngularJS

 

ng-repeat

Page 19: AngularJS

 

FILTERS

Page 20: AngularJS

 

VIEW CONTROLLERS AND SCOPE

Page 21: AngularJS

 

ng-controller

Page 22: AngularJS

 

Lets Hit the Code

More Concepts To come in Demo App

Page 23: AngularJS

 

Page 24: AngularJS