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

PPTX
Angular Data Binding
Jennifer Estrada
 
PPTX
Angular modules in depth
Christoffer Noring
 
PDF
Angular Directives
iFour Technolab Pvt. Ltd.
 
PDF
Angular data binding
Sultan Ahmed
 
PPTX
Angular 2.0 forms
Eyal Vardi
 
PPTX
Angular 9
Raja Vishnu
 
PPTX
Angular Directives
Malla Reddy University
 
Angular Data Binding
Jennifer Estrada
 
Angular modules in depth
Christoffer Noring
 
Angular Directives
iFour Technolab Pvt. Ltd.
 
Angular data binding
Sultan Ahmed
 
Angular 2.0 forms
Eyal Vardi
 
Angular 9
Raja Vishnu
 
Angular Directives
Malla Reddy University
 

What's hot (20)

PPTX
Angular introduction students
Christian John Felix
 
PDF
Angular - Chapter 7 - HTTP Services
WebStackAcademy
 
PDF
Angular directives and pipes
Knoldus Inc.
 
PDF
Angular - Chapter 4 - Data and Event Handling
WebStackAcademy
 
PPTX
Sharing Data Between Angular Components
Squash Apps Pvt Ltd
 
PPTX
What’s New in Angular 14?
Albiorix Technology
 
PPTX
Angularjs PPT
Amit Baghel
 
ODP
Routing & Navigating Pages in Angular 2
Knoldus Inc.
 
PDF
Angular - Chapter 5 - Directives
WebStackAcademy
 
PPTX
Introduction to RxJS
Abul Hasan
 
PPTX
React state
Ducat
 
PPT
Angular Introduction By Surekha Gadkari
Surekha Gadkari
 
PPTX
Angular 14.pptx
MohaNedGhawar
 
PDF
Angular Dependency Injection
Nir Kaufman
 
PDF
Angular - Chapter 3 - Components
WebStackAcademy
 
PPTX
Angular tutorial
Rohit Gupta
 
PPT
ASP.NET MVC Presentation
ivpol
 
PPTX
Angular
Mouad EL Fakir
 
PDF
Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...
Edureka!
 
Angular introduction students
Christian John Felix
 
Angular - Chapter 7 - HTTP Services
WebStackAcademy
 
Angular directives and pipes
Knoldus Inc.
 
Angular - Chapter 4 - Data and Event Handling
WebStackAcademy
 
Sharing Data Between Angular Components
Squash Apps Pvt Ltd
 
What’s New in Angular 14?
Albiorix Technology
 
Angularjs PPT
Amit Baghel
 
Routing & Navigating Pages in Angular 2
Knoldus Inc.
 
Angular - Chapter 5 - Directives
WebStackAcademy
 
Introduction to RxJS
Abul Hasan
 
React state
Ducat
 
Angular Introduction By Surekha Gadkari
Surekha Gadkari
 
Angular 14.pptx
MohaNedGhawar
 
Angular Dependency Injection
Nir Kaufman
 
Angular - Chapter 3 - Components
WebStackAcademy
 
Angular tutorial
Rohit Gupta
 
ASP.NET MVC Presentation
ivpol
 
Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...
Edureka!
 
Ad

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 Introduction (Talk given on Aug 5 2013)
Abhishek Anand
 
PPTX
Intoduction to Angularjs
Gaurav Agrawal
 
PPTX
Angularjs Basics
Anuradha Bandara
 
PPTX
AngularJs presentation
Phan Tuan
 
PPTX
A Big Picture Of AngularJS
Nitin Pandit
 
PDF
Angular js
Knoldus Inc.
 
PDF
Advanced Tips & Tricks for using Angular JS
Simon Guest
 
PDF
AngularJs
Abdhesh Kumar
 
PDF
Angularjs 131211063348-phpapp01
Arunangsu Sahu
 
PDF
Getting Started With AngularJS
Edureka!
 
PDF
Getting Started with AngularJS
Edureka!
 
PDF
An introduction to AngularJS
Yogesh singh
 
PPTX
Training On Angular Js
Mahima Radhakrishnan
 
PPTX
Real World Single Page App - A Knockout Case Study
housecor
 
PDF
AngularJS for Beginners
Edureka!
 
PDF
AngularJS Basics
Ravi Mone
 
PDF
One Weekend With AngularJS
Yashobanta Bai
 
PPTX
Dive into Angular, part 3: Performance
Oleksii Prohonnyi
 
PPTX
Introduction to AngularJS
Shyjal Raazi
 
PPTX
React vs Angular: ups & downs (speaker Oleksandr Kovalov, Binary Studio)
Binary Studio
 
AngularJS Introduction (Talk given on Aug 5 2013)
Abhishek Anand
 
Intoduction to Angularjs
Gaurav Agrawal
 
Angularjs Basics
Anuradha Bandara
 
AngularJs presentation
Phan Tuan
 
A Big Picture Of AngularJS
Nitin Pandit
 
Angular js
Knoldus Inc.
 
Advanced Tips & Tricks for using Angular JS
Simon Guest
 
AngularJs
Abdhesh Kumar
 
Angularjs 131211063348-phpapp01
Arunangsu Sahu
 
Getting Started With AngularJS
Edureka!
 
Getting Started with AngularJS
Edureka!
 
An introduction to AngularJS
Yogesh singh
 
Training On Angular Js
Mahima Radhakrishnan
 
Real World Single Page App - A Knockout Case Study
housecor
 
AngularJS for Beginners
Edureka!
 
AngularJS Basics
Ravi Mone
 
One Weekend With AngularJS
Yashobanta Bai
 
Dive into Angular, part 3: Performance
Oleksii Prohonnyi
 
Introduction to AngularJS
Shyjal Raazi
 
React vs Angular: ups & downs (speaker Oleksandr Kovalov, Binary Studio)
Binary Studio
 

Recently uploaded (20)

PDF
Orbitly Pitch Deck|A Mission-Driven Platform for Side Project Collaboration (...
zz41354899
 
PDF
How Onsite IT Support Drives Business Efficiency, Security, and Growth.pdf
Captain IT
 
PDF
Software Development Methodologies in 2025
KodekX
 
PPT
L2 Rules of Netiquette in Empowerment technology
Archibal2
 
PDF
Revolutionize Operations with Intelligent IoT Monitoring and Control
Rejig Digital
 
PDF
BLW VOCATIONAL TRAINING SUMMER INTERNSHIP REPORT
codernjn73
 
PDF
Cloud-Migration-Best-Practices-A-Practical-Guide-to-AWS-Azure-and-Google-Clou...
Artjoker Software Development Company
 
PDF
madgavkar20181017ppt McKinsey Presentation.pdf
georgschmitzdoerner
 
PPTX
ChatGPT's Deck on The Enduring Legacy of Fax Machines
Greg Swan
 
PDF
Why Your AI & Cybersecurity Hiring Still Misses the Mark in 2025
Virtual Employee Pvt. Ltd.
 
PPTX
The-Ethical-Hackers-Imperative-Safeguarding-the-Digital-Frontier.pptx
sujalchauhan1305
 
PDF
NewMind AI Weekly Chronicles - July'25 - Week IV
NewMind AI
 
PPTX
cloud computing vai.pptx for the project
vaibhavdobariyal79
 
PDF
This slide provides an overview Technology
mineshkharadi333
 
PDF
Enable Enterprise-Ready Security on IBM i Systems.pdf
Precisely
 
PDF
Software Development Company | KodekX
KodekX
 
PDF
GYTPOL If You Give a Hacker a Host
linda296484
 
PDF
Security features in Dell, HP, and Lenovo PC systems: A research-based compar...
Principled Technologies
 
PPTX
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 
PDF
Google I/O Extended 2025 Baku - all ppts
HusseinMalikMammadli
 
Orbitly Pitch Deck|A Mission-Driven Platform for Side Project Collaboration (...
zz41354899
 
How Onsite IT Support Drives Business Efficiency, Security, and Growth.pdf
Captain IT
 
Software Development Methodologies in 2025
KodekX
 
L2 Rules of Netiquette in Empowerment technology
Archibal2
 
Revolutionize Operations with Intelligent IoT Monitoring and Control
Rejig Digital
 
BLW VOCATIONAL TRAINING SUMMER INTERNSHIP REPORT
codernjn73
 
Cloud-Migration-Best-Practices-A-Practical-Guide-to-AWS-Azure-and-Google-Clou...
Artjoker Software Development Company
 
madgavkar20181017ppt McKinsey Presentation.pdf
georgschmitzdoerner
 
ChatGPT's Deck on The Enduring Legacy of Fax Machines
Greg Swan
 
Why Your AI & Cybersecurity Hiring Still Misses the Mark in 2025
Virtual Employee Pvt. Ltd.
 
The-Ethical-Hackers-Imperative-Safeguarding-the-Digital-Frontier.pptx
sujalchauhan1305
 
NewMind AI Weekly Chronicles - July'25 - Week IV
NewMind AI
 
cloud computing vai.pptx for the project
vaibhavdobariyal79
 
This slide provides an overview Technology
mineshkharadi333
 
Enable Enterprise-Ready Security on IBM i Systems.pdf
Precisely
 
Software Development Company | KodekX
KodekX
 
GYTPOL If You Give a Hacker a Host
linda296484
 
Security features in Dell, HP, and Lenovo PC systems: A research-based compar...
Principled Technologies
 
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 
Google I/O Extended 2025 Baku - all ppts
HusseinMalikMammadli
 

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