AngularJS Basics


Published on

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

AngularJS Basics

  1. 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. 2. Versions
  3. 3. AngularJS Statistics Resource: W3Tech Investigated technologies of websites, not individual web pages from the bank of 10 million web sites. April 2013
  4. 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. 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. 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. 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. 8. Key features • Scope – object that refers to application model • MVC • Services • Two-way data binding • Directives • Filters • Validation • Testable • Dependency Injection
  9. 9. Basics
  10. 10.
  11. 11. Let’s create MoveIt
  12. 12. Directives
  13. 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
  14. 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. 15. Model View Control
  16. 16. view Controller Model Binding to model MVC or MVW ?
  17. 17. Scope
  18. 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. 19. view Root scope HelloCtrl Scope Input Scope Render scope Scope
  20. 20. Root scope HelloCtrl Scope Input Scope Render scope <body> <div> <input> <h1> text Scope
  21. 21. ScopeRoot Scope MyController scope username : string
  22. 22. view Controller Model Binding to model $scope.getName = function() { return $; } } <h1>Hello, {{ getName() }}! </h1> Scope
  23. 23. Controller
  24. 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. 25. Application Scope Controller - Example Directives
  26. 26.
  27. 27. Binding
  28. 28. Two-way data binding Renders model value Binding to model (variable)
  29. 29. Binding • Basic Example
  30. 30. • MoveIt – simplest
  31. 31. Filters
  32. 32. Filters • Formats the value of an expression for display to the user • Can be used in view templates, controllers or services • Custom Filter
  33. 33. • MoveIt Custom Filter • MoveIt Custom Filter with radio
  34. 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. 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. 36. Bootstrap
  37. 37. Dependency …
  38. 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. 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. 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. 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
  42. 42. DI in a Nutshell • Why the parameters order is not important? .toString()
  43. 43. DI - Example
  44. 44. Modules
  45. 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. 46. Other functions • Lazy script loading • Validation • History • jasmine unit test
  47. 47. References
  48. 48. Resources • • • • “Mastering Web Application Development with AngularJS”, by Pavel Kozlovsky & Peter Bacon Darwin, August,2013
  49. 49. Thank you
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.