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


Published on

Published in: Technology

  • Be the first to comment

  • Be the first to like this

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 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.
  • 11. Let’s create MoveIt
  • 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
  • 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 $; } } <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.
  • 27. Binding
  • 28. Two-way data binding Renders model value Binding to model (variable)
  • 29. Binding • Basic Example
  • 30. • MoveIt – simplest
  • 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
  • 33. • MoveIt Custom Filter • MoveIt Custom Filter with radio
  • 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
  • 42. DI in a Nutshell • Why the parameters order is not important? .toString()
  • 43. DI - Example
  • 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 • • • • “Mastering Web Application Development with AngularJS”, by Pavel Kozlovsky & Peter Bacon Darwin, August,2013
  • 49. Thank you