SlideShare a Scribd company logo
Understand Data Binding
Cao Duy Khanh
Points
What is Data Binding
Two-Way vs One-Time Binding
Demos & QA
Background
Tool Age DOM manipulation tool like JQuery
Bronze Age Client-side templating tool like Mustache, Handlebars.js
Iron Age Angular, React
How we develop a 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
What is Data Binding
Connect the UI and business
logic of a web application
● New markup
-> Directives: ng-bind, ng-model
-> Expression {{foo}} syntax
● Controller interact through scope
What is Data Binding
How they made it? 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.
PROS +
● Dirty-checking work 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
50ms
Slow — Anything faster 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
Demo
One-Time Binding
One-Time Binding IS 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
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
One-Time vs One-Way Binding
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
What else?
Reduce watch count
Avoid ng-repeat where possible
Avoid using $watch where possible
Limit DOM filters
Don't make life complicate
Extra Story
Angular 1.5x provide 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+
Q&A

More Related Content

What's hot (20)

PPTX
Angular modules in depth
Christoffer Noring
 
PPTX
Angular Directives
Malla Reddy University
 
PDF
Angular - Chapter 7 - HTTP Services
WebStackAcademy
 
PPTX
jQuery PPT
Dominic Arrojado
 
PPTX
Angular 9
Raja Vishnu
 
PDF
Angular
Lilia Sfaxi
 
PDF
React JS - Introduction
Sergey Romaneko
 
PPTX
Angular Lifecycle Hooks
Squash Apps Pvt Ltd
 
PDF
Angular Advanced Routing
Laurent Duveau
 
PDF
Use Node.js to create a REST API
Fabien Vauchelles
 
PPTX
Angular
TejinderMakkar
 
ODP
Routing & Navigating Pages in Angular 2
Knoldus Inc.
 
PDF
Introduction to ReactJS
Hoang Long
 
PPT
Angular 8
Sunil OS
 
PDF
MVC architecture
Emily Bauman
 
PPT
Advanced JavaScript
Fu Cheng
 
PDF
C# ASP.NET WEB API APPLICATION DEVELOPMENT
Dr. Awase Khirni Syed
 
PDF
Solid NodeJS with TypeScript, Jest & NestJS
Rafael Casuso Romate
 
PDF
React js t2 - jsx
Jainul Musani
 
Angular modules in depth
Christoffer Noring
 
Angular Directives
Malla Reddy University
 
Angular - Chapter 7 - HTTP Services
WebStackAcademy
 
jQuery PPT
Dominic Arrojado
 
Angular 9
Raja Vishnu
 
Angular
Lilia Sfaxi
 
React JS - Introduction
Sergey Romaneko
 
Angular Lifecycle Hooks
Squash Apps Pvt Ltd
 
Angular Advanced Routing
Laurent Duveau
 
Use Node.js to create a REST API
Fabien Vauchelles
 
Routing & Navigating Pages in Angular 2
Knoldus Inc.
 
Introduction to ReactJS
Hoang Long
 
Angular 8
Sunil OS
 
MVC architecture
Emily Bauman
 
Advanced JavaScript
Fu Cheng
 
C# ASP.NET WEB API APPLICATION DEVELOPMENT
Dr. Awase Khirni Syed
 
Solid NodeJS with TypeScript, Jest & NestJS
Rafael Casuso Romate
 
React js t2 - jsx
Jainul Musani
 

Viewers also liked (15)

PDF
Brasilia 11-de-maio-de-2016 (1)
Sergio Pereira
 
PDF
Agenda e ficha concurso 2016
Sergio Pereira
 
PDF
createcompletioncertificate 3
Malvina Sandidge
 
PDF
Arquitectura del software
SabiH3rr3ra
 
PDF
El renacer del asombro
ComunnicacionUFV
 
PDF
Hanna The Girl That Eluded All Convention In Sing.Com
Dexian Wang
 
PDF
Conceptual de ruedas
Docente en Informática
 
PDF
Niitiin teewer
Buka King
 
DOCX
Fhhhfdghdfhdfzdzhhhkjljjljljjjlljljlljjllljl
josemiguel123456
 
PDF
Awareness and identity tools for pro-environmental behaviour change
Sam Cunningham
 
PPT
παρουσίαση δάσος
vagts
 
PPTX
Estilos de Aprendizagem Honey-Alonso
Alexandra Czepula
 
PPTX
Avulsion of permanent teeth
Rasha Adel
 
PPT
How-To PowerPoint for Elem.
iSURF
 
Brasilia 11-de-maio-de-2016 (1)
Sergio Pereira
 
Agenda e ficha concurso 2016
Sergio Pereira
 
createcompletioncertificate 3
Malvina Sandidge
 
Arquitectura del software
SabiH3rr3ra
 
El renacer del asombro
ComunnicacionUFV
 
Hanna The Girl That Eluded All Convention In Sing.Com
Dexian Wang
 
Conceptual de ruedas
Docente en Informática
 
Niitiin teewer
Buka King
 
Fhhhfdghdfhdfzdzhhhkjljjljljjjlljljlljjllljl
josemiguel123456
 
Awareness and identity tools for pro-environmental behaviour change
Sam Cunningham
 
παρουσίαση δάσος
vagts
 
Estilos de Aprendizagem Honey-Alonso
Alexandra Czepula
 
Avulsion of permanent teeth
Rasha Adel
 
How-To PowerPoint for Elem.
iSURF
 
Ad

Similar to Angular Data Binding (20)

PPTX
Angularjs Performance
Steven Lambert
 
PPT
introduction to Angularjs basics
Ravindra K
 
PPTX
AngularJs presentation
Phan Tuan
 
PDF
5 benefits of angular js
OnGraph Technologies Pvt. Ltd.
 
PDF
AngularJS - Overcoming performance issues. Limits.
Dragos Mihai Rusu
 
PDF
Dragos Rusu - Angular JS - Overcoming Performance Issues - CodeCamp-10-may-2014
Codecamp Romania
 
PPSX
Angular js
Arun Somu Panneerselvam
 
PPTX
Angular js introduction
Praveen Gubbala
 
PPTX
Dive into Angular, part 3: Performance
Oleksii Prohonnyi
 
PDF
Data binding in AngularJS, from model to view
Thomas Roch
 
PDF
AngularJS Beginner Day One
Troy Miles
 
PDF
An introduction to AngularJS
Yogesh singh
 
PPTX
Introduction to Angular JS
Santhosh Kumar Srinivasan
 
PDF
Angular Performance: Then, Now and the Future. Todd Motto
Future Insights
 
PPTX
Intoduction to Angularjs
Gaurav Agrawal
 
PDF
Itroducing Angular JS
Carlos Emanuel Mathiasen
 
PPTX
Angularjs Basics
Anuradha Bandara
 
PPTX
Angularjs Basics
Jayantha Sirisena
 
PDF
Dive into AngularJS and directives
Tricode (part of Dept)
 
PPTX
Intro to AngularJs
SolTech, Inc.
 
Angularjs Performance
Steven Lambert
 
introduction to Angularjs basics
Ravindra K
 
AngularJs presentation
Phan Tuan
 
5 benefits of angular js
OnGraph Technologies Pvt. Ltd.
 
AngularJS - Overcoming performance issues. Limits.
Dragos Mihai Rusu
 
Dragos Rusu - Angular JS - Overcoming Performance Issues - CodeCamp-10-may-2014
Codecamp Romania
 
Angular js introduction
Praveen Gubbala
 
Dive into Angular, part 3: Performance
Oleksii Prohonnyi
 
Data binding in AngularJS, from model to view
Thomas Roch
 
AngularJS Beginner Day One
Troy Miles
 
An introduction to AngularJS
Yogesh singh
 
Introduction to Angular JS
Santhosh Kumar Srinivasan
 
Angular Performance: Then, Now and the Future. Todd Motto
Future Insights
 
Intoduction to Angularjs
Gaurav Agrawal
 
Itroducing Angular JS
Carlos Emanuel Mathiasen
 
Angularjs Basics
Anuradha Bandara
 
Angularjs Basics
Jayantha Sirisena
 
Dive into AngularJS and directives
Tricode (part of Dept)
 
Intro to AngularJs
SolTech, Inc.
 
Ad

Recently uploaded (20)

PPTX
COMPARISON OF RASTER ANALYSIS TOOLS OF QGIS AND ARCGIS
Sharanya Sarkar
 
PDF
Peak of Data & AI Encore AI-Enhanced Workflows for the Real World
Safe Software
 
PPTX
Seamless Tech Experiences Showcasing Cross-Platform App Design.pptx
presentifyai
 
DOCX
Python coding for beginners !! Start now!#
Rajni Bhardwaj Grover
 
PPTX
Mastering ODC + Okta Configuration - Chennai OSUG
HathiMaryA
 
PPTX
MuleSoft MCP Support (Model Context Protocol) and Use Case Demo
shyamraj55
 
PPTX
The Project Compass - GDG on Campus MSIT
dscmsitkol
 
PDF
SIZING YOUR AIR CONDITIONER---A PRACTICAL GUIDE.pdf
Muhammad Rizwan Akram
 
PDF
Bitcoin for Millennials podcast with Bram, Power Laws of Bitcoin
Stephen Perrenod
 
PDF
Newgen 2022-Forrester Newgen TEI_13 05 2022-The-Total-Economic-Impact-Newgen-...
darshakparmar
 
PDF
Mastering Financial Management in Direct Selling
Epixel MLM Software
 
PDF
Staying Human in a Machine- Accelerated World
Catalin Jora
 
PDF
Newgen Beyond Frankenstein_Build vs Buy_Digital_version.pdf
darshakparmar
 
PDF
Reverse Engineering of Security Products: Developing an Advanced Microsoft De...
nwbxhhcyjv
 
PPT
Ericsson LTE presentation SEMINAR 2010.ppt
npat3
 
PPTX
AI Penetration Testing Essentials: A Cybersecurity Guide for 2025
defencerabbit Team
 
PPTX
Agentforce World Tour Toronto '25 - MCP with MuleSoft
Alexandra N. Martinez
 
PDF
Transcript: Book industry state of the nation 2025 - Tech Forum 2025
BookNet Canada
 
PPTX
Agentforce World Tour Toronto '25 - Supercharge MuleSoft Development with Mod...
Alexandra N. Martinez
 
PDF
CIFDAQ Market Wrap for the week of 4th July 2025
CIFDAQ
 
COMPARISON OF RASTER ANALYSIS TOOLS OF QGIS AND ARCGIS
Sharanya Sarkar
 
Peak of Data & AI Encore AI-Enhanced Workflows for the Real World
Safe Software
 
Seamless Tech Experiences Showcasing Cross-Platform App Design.pptx
presentifyai
 
Python coding for beginners !! Start now!#
Rajni Bhardwaj Grover
 
Mastering ODC + Okta Configuration - Chennai OSUG
HathiMaryA
 
MuleSoft MCP Support (Model Context Protocol) and Use Case Demo
shyamraj55
 
The Project Compass - GDG on Campus MSIT
dscmsitkol
 
SIZING YOUR AIR CONDITIONER---A PRACTICAL GUIDE.pdf
Muhammad Rizwan Akram
 
Bitcoin for Millennials podcast with Bram, Power Laws of Bitcoin
Stephen Perrenod
 
Newgen 2022-Forrester Newgen TEI_13 05 2022-The-Total-Economic-Impact-Newgen-...
darshakparmar
 
Mastering Financial Management in Direct Selling
Epixel MLM Software
 
Staying Human in a Machine- Accelerated World
Catalin Jora
 
Newgen Beyond Frankenstein_Build vs Buy_Digital_version.pdf
darshakparmar
 
Reverse Engineering of Security Products: Developing an Advanced Microsoft De...
nwbxhhcyjv
 
Ericsson LTE presentation SEMINAR 2010.ppt
npat3
 
AI Penetration Testing Essentials: A Cybersecurity Guide for 2025
defencerabbit Team
 
Agentforce World Tour Toronto '25 - MCP with MuleSoft
Alexandra N. Martinez
 
Transcript: Book industry state of the nation 2025 - Tech Forum 2025
BookNet Canada
 
Agentforce World Tour Toronto '25 - Supercharge MuleSoft Development with Mod...
Alexandra N. Martinez
 
CIFDAQ Market Wrap for the week of 4th July 2025
CIFDAQ
 

Angular Data Binding

  • 2. Points What is Data Binding Two-Way vs One-Time Binding Demos & QA
  • 3. Background Tool Age DOM manipulation tool like JQuery Bronze Age Client-side templating tool like Mustache, Handlebars.js Iron Age Angular, React
  • 4. How we develop a 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 Data Binding 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 Data Binding
  • 7. How they made it? 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-checking work 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 — Anything faster 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 Binding IS 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-Way Binding 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 watch count Avoid ng-repeat where possible Avoid using $watch where possible Limit DOM filters Don't make life complicate
  • 15. Extra Story Angular 1.5x provide 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