The document discusses two-way data binding in AngularJS, comparing dirty checking with observables for performance efficiency. It highlights best practices for efficient data handling and rendering in Angular applications, emphasizing the importance of minimizing DOM access within watch functions. The document also mentions AngularJS 2, focusing on its framework suitability for mobile apps and improved performance features.

1. Dive in

2. Two way bindings

3. var model={
myName: ”test”
}
<input type=“text” bind=“myName” />

4. Dirty checking vs. Observables

5. KO

6. Update me when myName is changed
data-bind=“value:myName”
Observable (view model)

7. myName = function(name){
myName=name;
//notify all listeners of “myName”
}

9. Angular Event Loop

10. Digest

11. ng-bind=“myName”
Update me when myName is changed
Added to watch list

12. Dirty checking
Expression3
myName
Expression2
Expression4
Changed?
yes
Update DOM
Changed?
No
Changed?
yes
Update DOM
Changed?
No
Changes
from last
loop ?
Watch list
Digest Loop
$scope.$digest()
Changed?
No
Changed?
No

13. $rootScope
child1child2
child3 child4
$rootScope.$digest()
$child1Scope.$digest()
$child2Scope.$digest()
$child4Scope.$digest()$child3Scope.$digest()

14. $rootScope.$digest()
$child1Scope.$digest()
$child2Scope.$digest()
$child4Scope.$digest()$child3Scope.$digest()
$child2Scope.$apply()
$rootScope
child1child2
child3 child4

15. $child1Scope.$digest()
$child4Scope.$digest()
$child1Scope.$digest()
$rootScope
child1child2
child3 child4

16. Rendering lists KO vs Angular
• Demo

17. Computed properties
fullName = firstName+ “ ”+ lastName

18. Summery
• Observables has better performance than dirty checking
• Dirty checking is slow when model grows
• Synchronous vs asynchronous bindings
• Computed properties in dirty checking does not have a meaning like
in observables

19. Performance considerations and best
practices
• When it is slow ?
$scope.$apply() > 25ms

20. Efficient $watch function
• dirty checking function must be efficient
• Will be evaluated large number of times
• Do not do DOM access (DOM => cost ) inside the $watch functions

21. $digest vs. $apply
• Use $digest whenever it’s possible

22. Ng-if vs. ng-show
• The ng-If directive removes or recreates a portion of the DOM tree
based on an {expression}
• The ng-Show directive shows or hides the given HTML element based
on the expression

23. $eval and $parse
• $eval uses $parse inside it
for(i=0;i<100;i++){
var value=$scope.$eval(exp)
}
Var parsed =$parse(exp);
for(i=0;i<100;i++){
var value= parsed($scope);
}

24. Watch only what is needed
$watch(someObject,function(){
})
$watch(someObject,function(){
},true )
Deep Watchshallow watch

25. $watch vs. $watchCollection
• $watchCollection will watch only one step deep
• Use $watchCollection if possible

26. Directives for Performance improvements
• Bind once
• Fast-bind , notify –bind
• Bind sometimes ,not all the time ?

27. Angular 2.0
• AngularJS 2 is a framework for mobile apps. It is for desktop as well,
but mobile is the hard bit that we will get right first.
• All code in AngularJS 2 is already being written in ES6.
• Faster change detection (Object.observe())

29. References
• https://docs.angularjs.org/api/ng/type/$rootScope.Scope
• http://www.youtube.com/watch?v=zyYpHIOrk_Y
• http://knockoutjs.com/documentation/observables.html
• http://blog.angularjs.org/2014/03/angular-20.html