Boyan Mihaylov
boyan.mihailov@gmail.com
http://www.linkedin.com/in/bmihaylov
 B.Sc. in Software Engineering at The University of
Sofia
 M.Sc. in Computer Science at The University of
Copenhagen, Denmark
 5+ years of professional experience
 Favorite technologies
 C#
 JavaScript
 PHP
 jQuery is too low-level
 Need to handle complex clients
 MV* pattern on the client
 No DOM operations
 Testability
 Huge community
 33 439+ questions on Stack Overflow
 Demo, demo, demo
 Practical advices
 Short overview of the main concepts
 Some advanced techniques
 Dirty checking (used by AngularJS)
 Compares a value against the previous value
 Works in all browsers
 Totally predictable
 Change events (e.g., Knockout)
 Trigger an event on every change
 Can update UI before all the changes has completed
 Bad performance
 Has to consider dependency tracking
 Make only async requests
 Otherwise the browser hangs
 Promises
 Gives you a promise that you will receive a reply in the
future
 Can be controlled by a deferred object
 Resolve() / Reject()
 Chaining of promises
 One promise can change the value returned by another
promise
 AngularJS uses modules
 A LOT!
 Separation of concerns
 Plug and play
 Dependencies between modules
 Basic structure for small applications
 Can contain further folders for complex applications
 Directives – isolate a piece of logic
 Can be declared as
 HTML attributes
<div hello></div>
 CSS classes
<div class=“hello”></div>
 HTML tags
<hello>there</hello>
 AngularJS offers services
 Can contain light domain logic
 N.B. Domain logic should be on the server, exposed via
API
 Relies on the data from the server
 Can also be data-less
 The glue between the controllers and the UI
 Only one root scope
 Many children
 Children are prototypically created from the parent
scope
 $rootScope.hello = ‘there’;
$childScope = prototype of $rootScope
alert($childScope.hello); // ‘there’
 http://angularjs.org/
 http://www.angularjshub.com
 http://plus.google.com/+AngularJS
 http://code.dortikum.net/2014/02/15/from-
xmlhttprequest-to-promises/
Component-driven development with AngularJS
Component-driven development with AngularJS

Component-driven development with AngularJS

  • 1.
  • 2.
     B.Sc. inSoftware Engineering at The University of Sofia  M.Sc. in Computer Science at The University of Copenhagen, Denmark  5+ years of professional experience  Favorite technologies  C#  JavaScript  PHP
  • 3.
     jQuery istoo low-level  Need to handle complex clients  MV* pattern on the client  No DOM operations  Testability  Huge community  33 439+ questions on Stack Overflow
  • 4.
     Demo, demo,demo  Practical advices  Short overview of the main concepts  Some advanced techniques
  • 6.
     Dirty checking(used by AngularJS)  Compares a value against the previous value  Works in all browsers  Totally predictable  Change events (e.g., Knockout)  Trigger an event on every change  Can update UI before all the changes has completed  Bad performance  Has to consider dependency tracking
  • 7.
     Make onlyasync requests  Otherwise the browser hangs  Promises  Gives you a promise that you will receive a reply in the future  Can be controlled by a deferred object  Resolve() / Reject()  Chaining of promises  One promise can change the value returned by another promise
  • 8.
     AngularJS usesmodules  A LOT!  Separation of concerns  Plug and play  Dependencies between modules
  • 14.
     Basic structurefor small applications  Can contain further folders for complex applications
  • 15.
     Directives –isolate a piece of logic  Can be declared as  HTML attributes <div hello></div>  CSS classes <div class=“hello”></div>  HTML tags <hello>there</hello>
  • 16.
     AngularJS offersservices  Can contain light domain logic  N.B. Domain logic should be on the server, exposed via API  Relies on the data from the server  Can also be data-less
  • 17.
     The gluebetween the controllers and the UI  Only one root scope  Many children  Children are prototypically created from the parent scope  $rootScope.hello = ‘there’; $childScope = prototype of $rootScope alert($childScope.hello); // ‘there’
  • 18.
     http://angularjs.org/  http://www.angularjshub.com http://plus.google.com/+AngularJS  http://code.dortikum.net/2014/02/15/from- xmlhttprequest-to-promises/