Downloaded 37 times
![AngularJS Ext JS jQuery
Feature detection[5] Yes Yes Yes
DOM wrapped[20] Yes Yes Yes
XMLHttpRequest
Yes Yes Yes
data retrieval
[WebSocket] Yes Yes
Server pushdata retrieval Yes Yes
Other data retrieval
Yes: XML, SOAP, AMF,
Ext.Direct
Yes: XML, HTML
Drag and drop Yes Yes
Simple visual effects Yes Yes Yes
Animation /
Yes Yes Yes
advanced visual effects
Event handling Yes Yes Yes
Back button support /
Yes With plugins[53]
history management
Input formwidgets & validation Yes Yes With plugins[59]
Grid Yes With plugins[64]
Hierarchical Tree Yes With plugins[74]
Rich text editor No Yes With plugins[85]
Autocompletiontools No Yes With plugins[90]
HTMLgeneration tools No Yes Yes
Comparison JavaScript Frameworks](https://image.slidesharecdn.com/angularjs-20presentation-140429162824-phpapp01/85/AngularJS-Basics-6-320.jpg)
![AngularJS Ext JS jQuery
Widgets themeable / skinnable Yes[97] Yes[99]
GUI resizable panels and modal dialogs Yes With plugins
GUI page layout Yes With plugin[108]
Canvas support Yes With plugin[112]
Mobile/tablet support (touch events) Yes Yes With plugin[119]
Accessibility /
Yes Yes Yes
graceful degradation[124]
ARIA compliant Yes Yes[131]
Developer tools, Visual design Yes Yes[137][138]
Offline storage[144] Yes With plugin[149]
Cross-browser 2d Vector
Graphics[152]
Yes With plugin[155]
Charting & Dashboard[158] Yes With plugin[163][164]
RTL Support in UI Components Yes Depends on the plugin used
Comparison JavaScript Frameworks](https://image.slidesharecdn.com/angularjs-20presentation-140429162824-phpapp01/85/AngularJS-Basics-7-320.jpg)
Uploaded byNikita Shounewich
AngularJS Basics
- Angular is an open-source web application framework originally developed in 2009 that uses HTML as its template language. It is commonly used to create single-page applications. - Angular uses MVC architecture and two-way data binding between models and views. It has built-in dependency injection which allows for testable and scalable code. - Key Angular concepts include directives, filters, controllers and scopes which allow manipulating DOM elements and binding data. Modules are used to package code into reusable components.
More Related Content
AngularJS Basics
- 2. General • Javascript Framework •Angular = ng = &ng • Angular is full-featured SPA framework • Open-source web application framework • Originally developed in 2009 by Miško Hevery and Adam Abrons • Used as the business software behind an online JSON storage service • Safari, Chrome, Firefox, Opera, IE8, IE9 and mobile browsers (Android, Chrome Mobile, iOS Safari) • Versions – Stable: 1.2.x – Beta: 1.3.0
- 3.
- 4. AngularJS Statistics Resource: W3Tech Investigatedtechnologies of websites, not individual web pages from the bank of 10 million web sites. April 2013
- 5. ExtJs Usage Statistics Resource:W3Tech Investigated technologies of websites, not individual web pages from the bank of 10 million web sites. April 2013
- 6. AngularJS Ext JSjQuery Feature detection[5] Yes Yes Yes DOM wrapped[20] Yes Yes Yes XMLHttpRequest Yes Yes Yes data retrieval [WebSocket] Yes Yes Server pushdata retrieval Yes Yes Other data retrieval Yes: XML, SOAP, AMF, Ext.Direct Yes: XML, HTML Drag and drop Yes Yes Simple visual effects Yes Yes Yes Animation / Yes Yes Yes advanced visual effects Event handling Yes Yes Yes Back button support / Yes With plugins[53] history management Input formwidgets & validation Yes Yes With plugins[59] Grid Yes With plugins[64] Hierarchical Tree Yes With plugins[74] Rich text editor No Yes With plugins[85] Autocompletiontools No Yes With plugins[90] HTMLgeneration tools No Yes Yes Comparison JavaScript Frameworks
- 7. AngularJS Ext JSjQuery Widgets themeable / skinnable Yes[97] Yes[99] GUI resizable panels and modal dialogs Yes With plugins GUI page layout Yes With plugin[108] Canvas support Yes With plugin[112] Mobile/tablet support (touch events) Yes Yes With plugin[119] Accessibility / Yes Yes Yes graceful degradation[124] ARIA compliant Yes Yes[131] Developer tools, Visual design Yes Yes[137][138] Offline storage[144] Yes With plugin[149] Cross-browser 2d Vector Graphics[152] Yes With plugin[155] Charting & Dashboard[158] Yes With plugin[163][164] RTL Support in UI Components Yes Depends on the plugin used Comparison JavaScript Frameworks
- 8. AngularJS - Goals& Concept • 100% Javascript • Declarative Programming paradigm (like SQL) • MVC • jqLight – the light version of jquery • Decouple DOM manipulation • Size AngularJS Backbone Ember Size 36K 6.4K 69K
- 9. Key features • Scope– object that refers to application model • MVC • Services • Two-way data binding • Directives • Filters • Validation • Testable • Dependency Injection
- 10.
- 11.
- 12.
- 13.
- 14. Directives • Markers ona DOM element • Tells to the compiler to attach a specific behavior to that DOM element • Custom directives definition is possible http://jsfiddle.net/roadprophet/DsvX6/
- 15. Most Useful Directives •ng-app • ng-bind • ng-model • ng-class • ng-controller • ng-switch, ng-if, ng-show, ng-hide • ng-repeat • ng-view
- 16.
- 17.
- 18.
- 19. Scope • $scope -expose the domain model to a view (template) • By assigning properties to scope instances, we can make new values available to a template for rendering. • Two types of scope – Inherited – Isolated (many scope models
- 20.
- 21.
- 22.
- 23. view Controller Model Binding to model $scope.getName= function() { return $scope.name; } } <h1>Hello, {{ getName() }}! </h1> Scope
- 24.
- 25. Controller • The primaryresponsibility of a controller is to initialize scope objects. – Providing initial model values – Augmenting $scope with UI-specific behavior (functions) • Controllers are regular JavaScript functions.
- 26. Application Scope Controller -Example Directives
- 27.
- 28.
- 29. Two-way data binding Rendersmodel value Binding to model (variable)
- 30.
- 31. • MoveIt –simplest http://plnkr.co/edit/hxLXgXd3Lvhm2FAVlYTY?p=preview
- 32.
- 33. Filters • Formats thevalue of an expression for display to the user • Can be used in view templates, controllers or services • Custom Filter http://jsfiddle.net/CBgcP/413/
- 34. • MoveIt CustomFilter http://plnkr.co/edit/0wl7Jh47wRKIHpwNaAnE?p=preview • MoveIt Custom Filter with radio http://plnkr.co/edit/pMZN90UxpHoQ3FE4tQhR?p=preview
- 35. In computer technologytheterm (usually shortened to booting) usually refers to the process of loading the basic software into the memory of a computer after power-on or general reset, especially the operating system which will then take care of loading other software as needed. In general parlance, bootstrapping usually refers to the starting of a self-sustaining process that is supposed to proceed without external input
- 36. Bootstrap in AngularJS •Create a new injector • Compile (Walk through the DOM and locate all directives) • Link – attach all the directives to scope.
- 37.
- 38.
- 39. Dependency Injection • DI– Software Design Pattern that deals with how components get hold of their dependencies. • AngularJS is in charge of – Creating component – Resolving their dependencies – Providing them to other components as requested. • Injector knows to inject itself (first time it runs) • Injector will only create an instance of a service once (the next time it will use the cached one). • You can inject service into controller, directive or filter • Controllers cannot be injected into other things. Why?
- 40. DI in aNutshell • How component can get a hold on its dependencies? – Typically using the new operator – Looking up, by referring to a global variable – Having the dependency passed to it where it is needed.
- 41. DI in aNutshell • How component can get a hold on its dependencies? – Typically using the new operator – Looking up, by referring to a global variable – Having the dependency passed to it where it is needed. • Removes the responsibility of locating the dependency from the component
- 42. • However, SomeClassnow is responsible of getting hold of the dependency on the code that constructs Greeter. • To manage the responsibility of dependency creation, each Angular application has an injector. The injector is a service locator that is responsible for construction and lookup of dependencies. DI in a Nutshell http://plnkr.co/edit/7IBuN94H9MMzere3QzDs?p=preview
- 43. DI in aNutshell • Why the parameters order is not important? .toString()
- 44.
- 45.
- 46. Modules • The declarativeprocess is easier to understand • Packaging code as reusable modules • The order of loading modules is not important or even parallel • Unit testing
- 47. Other functions • Lazyscript loading • Validation • History • jasmine unit test
- 48.
- 49. Resources • https://github.com/angular/angular.js/wiki/Understanding-Dependency-Injection • http://twilson63.github.io/codecamp-angularjs-reveal/#/4 •https://docs.angularjs.org/guide • “Mastering Web Application Development with AngularJS”, by Pavel Kozlovsky & Peter Bacon Darwin, August,2013
- 50.