Your SlideShare is downloading. ×
AngularJS Basics
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

AngularJS Basics

424
views

Published on

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
424
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
29
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 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
  • 2. Versions
  • 3. AngularJS Statistics Resource: W3Tech Investigated technologies of websites, not individual web pages from the bank of 10 million web sites. April 2013
  • 4. ExtJs Usage Statistics Resource: W3Tech Investigated technologies of websites, not individual web pages from the bank of 10 million web sites. April 2013
  • 5. 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
  • 6. 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
  • 7. 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
  • 8. Key features • Scope – object that refers to application model • MVC • Services • Two-way data binding • Directives • Filters • Validation • Testable • Dependency Injection
  • 9. Basics
  • 10. http://jsfiddle.net/sna19/WrZh2/
  • 11. Let’s create MoveIt http://plnkr.co/edit/YemibukYfCvpIy9Lblma?p=preview
  • 12. Directives
  • 13. Directives • Markers on a 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/
  • 14. 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
  • 15. Model View Control
  • 16. view Controller Model Binding to model MVC or MVW ?
  • 17. Scope
  • 18. 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
  • 19. view Root scope HelloCtrl Scope Input Scope Render scope Scope
  • 20. Root scope HelloCtrl Scope Input Scope Render scope <body> <div> <input> <h1> text Scope
  • 21. ScopeRoot Scope MyController scope username : string
  • 22. view Controller Model Binding to model $scope.getName = function() { return $scope.name; } } <h1>Hello, {{ getName() }}! </h1> Scope
  • 23. Controller
  • 24. Controller • The primary responsibility of a controller is to initialize scope objects. – Providing initial model values – Augmenting $scope with UI-specific behavior (functions) • Controllers are regular JavaScript functions.
  • 25. Application Scope Controller - Example Directives
  • 26. http://plnkr.co/edit/Jp0F8UYnHQAwvdW3VsIl
  • 27. Binding
  • 28. Two-way data binding Renders model value Binding to model (variable)
  • 29. Binding • Basic Example http://jsfiddle.net/sna19/T5yvB/
  • 30. • MoveIt – simplest http://plnkr.co/edit/hxLXgXd3Lvhm2FAVlYTY?p=preview
  • 31. Filters
  • 32. Filters • Formats the value of an expression for display to the user • Can be used in view templates, controllers or services • Custom Filter http://jsfiddle.net/CBgcP/413/
  • 33. • MoveIt Custom Filter http://plnkr.co/edit/0wl7Jh47wRKIHpwNaAnE?p=preview • MoveIt Custom Filter with radio http://plnkr.co/edit/pMZN90UxpHoQ3FE4tQhR?p=preview
  • 34. In computer technologythe term (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
  • 35. Bootstrap in AngularJS • Create a new injector • Compile (Walk through the DOM and locate all directives) • Link – attach all the directives to scope.
  • 36. Bootstrap
  • 37. Dependency …
  • 38. 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?
  • 39. DI in a Nutshell • 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.
  • 40. DI in a Nutshell • 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
  • 41. • However, SomeClass now 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
  • 42. DI in a Nutshell • Why the parameters order is not important? .toString()
  • 43. DI - Example http://plnkr.co/edit/YOHFHCzcGUGq800mZSOM?p=preview
  • 44. Modules
  • 45. Modules • The declarative process is easier to understand • Packaging code as reusable modules • The order of loading modules is not important or even parallel • Unit testing
  • 46. Other functions • Lazy script loading • Validation • History • jasmine unit test
  • 47. References
  • 48. 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
  • 49. Thank you

×