AngularJS Basics

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.
  Versions
• 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.
  Basics
• 11.
  http://jsfiddle.net/sna19/WrZh2/
• 12.
  Let’s create MoveIt http://plnkr.co/edit/YemibukYfCvpIy9Lblma?p=preview
• 13.
  Directives
• 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.
  Model View Control
• 17.
  view Controller Model Binding to model MVCor MVW ?
• 18.
  Scope
• 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.
  view Root scope HelloCtrl Scope Input Scope Render scope Scope
• 21.
  Root scope HelloCtrl Scope Input Scope Render scope <body> <div> <input> <h1> text Scope
• 22.
  ScopeRoot Scope MyController scope username :string
• 23.
  view Controller Model Binding to model $scope.getName= function() { return $scope.name; } } <h1>Hello, {{ getName() }}! </h1> Scope
• 24.
  Controller
• 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.
  http://plnkr.co/edit/Jp0F8UYnHQAwvdW3VsIl
• 28.
  Binding
• 29.
  Two-way data binding Rendersmodel value Binding to model (variable)
• 30.
  Binding • Basic Example http://jsfiddle.net/sna19/T5yvB/
• 31.
  • MoveIt –simplest http://plnkr.co/edit/hxLXgXd3Lvhm2FAVlYTY?p=preview
• 32.
  Filters
• 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.
  Bootstrap
• 38.
  Dependency …
• 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.
  DI - Example http://plnkr.co/edit/YOHFHCzcGUGq800mZSOM?p=preview
• 45.
  Modules
• 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.
  References
• 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.
  Thank you