Angular Data Binding

Angular Data Binding

• 1.
  Understand Data Binding CaoDuy Khanh
• 2.
  Points What is DataBinding Two-Way vs One-Time Binding Demos & QA
• 3.
  Background Tool Age DOMmanipulation tool like JQuery Bronze Age Client-side templating tool like Mustache, Handlebars.js Iron Age Angular, React
• 4.
  How we developa web app Before 1. HTML that defines your page 2. Get necessary data by AJAX 3. Client side templating (Script hack: <script type="text/html">...</script>) 4. JavaScript renders the client-side template 5. JavaScript injects the template HTML into the DOM Today 1. HTML that defines your page and client-side templates together 2. Get necessary data by AJAX
• 5.
  What is DataBinding Connect the UI and business logic of a web application ● New markup -> Directives: ng-bind, ng-model -> Expression {{foo}} syntax ● Controller interact through scope
• 6.
  What is DataBinding
• 7.
  How they madeit? Dirty-checking 1. $$watchers are registered by directives, expression or $watch 2. $scope.$apply 3. $digest is the cycle that performs dirty checking a. loop through $$watchers b. fire any listener event if the watchExp does not equal the last known value 4. $digest runs till no changes detected.
• 8.
  PROS + ● Dirty-checkingwork on all browsers and trustable ● Client side templates are cohesive with your page ● No need manipulation of the DOM ● You have control over the scope of your JavaScript ● Clean code ● Fast at rendering elements CONS - Dirty-checking is slow Heavy parsing work, or extensive manipulation and processing Same binding directive more than once – can break the data binding process No built-in computed properties
• 9.
  50ms Slow — Anythingfaster than 50 ms is imperceptible to humans and thus can be considered as "instant". POJO All objects in AngularJS are POJOs, which stands for PLAIN OLD JAVA(SCRIPT) OBJECTS. 10 times If $digest loops more than 10 times, app dies 2000 pieces Limited — You can't really show more than about 2000 pieces of information to a human on a single page 10000 watchers In modern browsers, AngularJS just take under 6ms to work on them
• 10.
  Demo
• 11.
  One-Time Binding One-Time BindingIS NOT One-Way Binding Allows for a model or view to be updated ONCE from the value set by the controller upon the first digest cycle Create only one watch for the expression Digest loops faster, frees up resources once the binding is stabilized
• 12.
  How it works? 1.First $digest loop meet :: expression A, store value as V a. If V is not undefined, mark A as deregistered watch b. If V is undefined, A is still in watch list 1. Continue loop as normal 1. When loop finish, check all deregistered watches a. If "value" of all deregistered watches are not undefined, remove them from watch list b. If not, special deregistered watch is still in watch list then loop again
• 13.
  One-Time vs One-WayBinding One-Way One time merge Not automatically After merge, view and model can be updated manually $$watchers remains One-Time It's not mean run ONCE View is updated automatically once Model can change but view can't Reduce $$watchers by 1
• 14.
  What else? Reduce watchcount Avoid ng-repeat where possible Avoid using $watch where possible Limit DOM filters Don't make life complicate
• 15.
  Extra Story Angular 1.5xprovide truly one-way binding Two-way binding has been dropped from Angular 2 ? React's one-way data flow (also called one-way binding) There is no convention for specifying one way or two way bindings New technologies like AngularJS will show up in ES7+
• 16.
  Q&A