HTML enhanced for web apps!HTML enhanced for web apps!
Back in time ...Websites instead of webappsClient seen as an interfaceAll the workload handled bythe serverNo client-side ...
Getting into the present day...AJAX – HTML5 – CSS3Web 2.0Client splitted from serverLots of new Javascript librariesWebapp
Javascript: the answer!Javascript frameworksMVC ArchitectureBig webappNo more comparison withweb designers!
A current problemToo much timeToo much codeToo much stressBuilding client-sidewebapp is still hardDOM ManipulationData val...
Angular for the life!Data-bindingBasic templating directivesForm validationRoutingReusable componentsDependency injectionU...
BootstrapLoad HTML DOMLoad the module associated withthe directiveCreate the application injectorCompile the DOM treating ...
Conceptual Overview1. The browser loads the HTML and parses itinto a DOM2. The browser loads angular.js script3. Angular w...
HTML CompilerCompile: traverse the DOM and collect all of the directives.The result is a linking function.Link: combine th...
Data-bindingAlso known as MVVM
Runtime1. The browsers event-loop waitsfor an event to arrive. An event isa user interaction, timer event, ornetwork event...
Runtime in detail1. Enter Angular execution context by calling scope.$apply(stimulusFn)2. Angular executes the stimulusFn(...
Scope & ViewThe browser parses the HTML intothe DOM, and the DOM becomesthe input to the template engineknown as the compi...
Directives & FiltersA directive is a behavior or DOM transformation which is triggered bythe presence of a custom attribut...
Modules & InjectorsThe injector is a service locator. Thereis a single injector per Angularapplication. The injector provi...
Whats next?Formsi18n & l10nModulesDependenciesMVCE2E TestingAngular Servicesetc etc etc
The End
Upcoming SlideShare
Loading in …5
×

Angularjs

1,890 views

Published on

Published in: Technology

Angularjs

  1. 1. HTML enhanced for web apps!HTML enhanced for web apps!
  2. 2. Back in time ...Websites instead of webappsClient seen as an interfaceAll the workload handled bythe serverNo client-side logicJavascript coder seen as webdesigner… when dinosaurs rule the Earth
  3. 3. Getting into the present day...AJAX – HTML5 – CSS3Web 2.0Client splitted from serverLots of new Javascript librariesWebapp
  4. 4. Javascript: the answer!Javascript frameworksMVC ArchitectureBig webappNo more comparison withweb designers!
  5. 5. A current problemToo much timeToo much codeToo much stressBuilding client-sidewebapp is still hardDOM ManipulationData validation
  6. 6. Angular for the life!Data-bindingBasic templating directivesForm validationRoutingReusable componentsDependency injectionUnit-testing
  7. 7. BootstrapLoad HTML DOMLoad the module associated withthe directiveCreate the application injectorCompile the DOM treating the ng-app directive as the root of thecompilation
  8. 8. Conceptual Overview1. The browser loads the HTML and parses itinto a DOM2. The browser loads angular.js script3. Angular waits for DOMContentLoaded event4. Angular looks for ng-app directive, whichdesignates the application boundary5. The Module specified in ng-app (if any) isused to configure the $injector6. The $injector is used to create the $compileservice as well as $rootScope7. The $compile service is used to compile theDOM and link it with $rootScope
  9. 9. HTML CompilerCompile: traverse the DOM and collect all of the directives.The result is a linking function.Link: combine the directives with a scope and produce alive view. Any changes in the scope model are reflected inthe view, and any user interactions with the view arereflected in the scope model. This makes the scope modelthe single source of truth.Compiler is an angular service which traverses the DOM looking for attributes
  10. 10. Data-bindingAlso known as MVVM
  11. 11. Runtime1. The browsers event-loop waitsfor an event to arrive. An event isa user interaction, timer event, ornetwork event (response from aserver)2. The events callback getsexecuted. This enters theJavaScript context. The callbackcan modify the DOM structure3. Once the callback executes,the browser leaves the JavaScriptcontext and re-renders the viewbased on DOM changes.
  12. 12. Runtime in detail1. Enter Angular execution context by calling scope.$apply(stimulusFn)2. Angular executes the stimulusFn(), which typically modifiesapplication state3. Angular enters the $digest loop. The loop is made up of two smallerloops which process $evalAsync queue and the $watch list. The$digest loop keeps iterating until the model stabilizes.4. The $evalAsync queue is used to schedule work which needs tooccur outside of current stack frame, but before the browsers viewrender5. The $watch list is a set of expressions which may have changedsince last iteration. If a change is detected then the $watch function iscalled which typically updates the DOM with the new value7. Once the Angular $digest loop finishes the execution leaves theAngular and JavaScript context. This is followed by the browser re-rendering the DOM to reflect any changes
  13. 13. Scope & ViewThe browser parses the HTML intothe DOM, and the DOM becomesthe input to the template engineknown as the compiler. Thecompiler looks for directives whichin turn set up watches on the model.The result is a continuouslyupdating view which does not needtemplate model re-merging. Yourmodel becomes the single source-of-truth for your view.The scope is responsible for detecting changes to the model sectionand provides the execution context for expressions.
  14. 14. Directives & FiltersA directive is a behavior or DOM transformation which is triggered bythe presence of a custom attribute, element name, or a class name. Adirective allows you to extend the HTML vocabulary in a declarativefashion.<input type=”text” ng-model=”user.name” placeholder=”Foo”/>Filters perform data transformation. Typically they are used inconjunction with the locale to format the data in locale specific output.They follow the spirit of UNIX filters and use similar syntax | (pipe).<div>Negative number: {{val | number:2}}</div><div>Your name (in lowercase): {{user.name | lowercase}}</div>
  15. 15. Modules & InjectorsThe injector is a service locator. Thereis a single injector per Angularapplication. The injector provides away to look up an object instance by itsname. The injector keeps an internalcache of all objects so that repeatedcalls to get the same object nameresult in the same instance. If theobject does not exist, then the injectorasks the instance factory to create anew instance.A module is a way to configure the injectors instance factory, knownas a provider.
  16. 16. Whats next?Formsi18n & l10nModulesDependenciesMVCE2E TestingAngular Servicesetc etc etc
  17. 17. The End

×