Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Dive in
Two way bindings
var model={
myName: ”test”
}
<input type=“text” bind=“myName” />
Dirty checking vs. Observables
KO
Update me when myName is changed
data-bind=“value:myName”
Observable (view model)
myName = function(name){
myName=name;
//notify all listeners of “myName”
}
Angular Event Loop
Digest
ng-bind=“myName”
Update me when myName is changed
Added to watch list
Dirty checking
Expression3
myName
Expression2
Expression4
Changed?
yes
Update DOM
Changed?
No
Changed?
yes
Update DOM
Chan...
$rootScope
child1child2
child3 child4
$rootScope.$digest()
$child1Scope.$digest()
$child2Scope.$digest()
$child4Scope.$dig...
$rootScope.$digest()
$child1Scope.$digest()
$child2Scope.$digest()
$child4Scope.$digest()$child3Scope.$digest()
$child2Sco...
$child1Scope.$digest()
$child4Scope.$digest()
$child1Scope.$digest()
$rootScope
child1child2
child3 child4
Rendering lists KO vs Angular
• Demo
Computed properties
fullName = firstName+ “ ”+ lastName
Summery
• Observables has better performance than dirty checking
• Dirty checking is slow when model grows
• Synchronous v...
Performance considerations and best
practices
• When it is slow ?
$scope.$apply() > 25ms
Efficient $watch function
• dirty checking function must be efficient
• Will be evaluated large number of times
• Do not d...
$digest vs. $apply
• Use $digest whenever it’s possible
Ng-if vs. ng-show
• The ng-If directive removes or recreates a portion of the DOM tree
based on an {expression}
• The ng-S...
$eval and $parse
• $eval uses $parse inside it
for(i=0;i<100;i++){
var value=$scope.$eval(exp)
}
Var parsed =$parse(exp);
...
Watch only what is needed
$watch(someObject,function(){
})
$watch(someObject,function(){
},true )
Deep Watchshallow watch
$watch vs. $watchCollection
• $watchCollection will watch only one step deep
• Use $watchCollection if possible
Directives for Performance improvements
• Bind once
• Fast-bind , notify –bind
• Bind sometimes ,not all the time ?
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 wi...
References
• https://docs.angularjs.org/api/ng/type/$rootScope.Scope
• http://www.youtube.com/watch?v=zyYpHIOrk_Y
• http:/...
AngularJs , How it works
AngularJs , How it works
Upcoming SlideShare
Loading in …5
×

AngularJs , How it works

This tries to compare two way databinding implimentation of angularjs and knockout js. And tries to describe how angularjs dirty checking works. And also some angularjs best practices at the end.

  • Login to see the comments

AngularJs , How it works

  1. 1. Dive in
  2. 2. Two way bindings
  3. 3. var model={ myName: ”test” } <input type=“text” bind=“myName” />
  4. 4. Dirty checking vs. Observables
  5. 5. KO
  6. 6. Update me when myName is changed data-bind=“value:myName” Observable (view model)
  7. 7. myName = function(name){ myName=name; //notify all listeners of “myName” }
  8. 8. Angular Event Loop
  9. 9. Digest
  10. 10. ng-bind=“myName” Update me when myName is changed Added to watch list
  11. 11. 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
  12. 12. $rootScope child1child2 child3 child4 $rootScope.$digest() $child1Scope.$digest() $child2Scope.$digest() $child4Scope.$digest()$child3Scope.$digest()
  13. 13. $rootScope.$digest() $child1Scope.$digest() $child2Scope.$digest() $child4Scope.$digest()$child3Scope.$digest() $child2Scope.$apply() $rootScope child1child2 child3 child4
  14. 14. $child1Scope.$digest() $child4Scope.$digest() $child1Scope.$digest() $rootScope child1child2 child3 child4
  15. 15. Rendering lists KO vs Angular • Demo
  16. 16. Computed properties fullName = firstName+ “ ”+ lastName
  17. 17. 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
  18. 18. Performance considerations and best practices • When it is slow ? $scope.$apply() > 25ms
  19. 19. 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
  20. 20. $digest vs. $apply • Use $digest whenever it’s possible
  21. 21. 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
  22. 22. $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); }
  23. 23. Watch only what is needed $watch(someObject,function(){ }) $watch(someObject,function(){ },true ) Deep Watchshallow watch
  24. 24. $watch vs. $watchCollection • $watchCollection will watch only one step deep • Use $watchCollection if possible
  25. 25. Directives for Performance improvements • Bind once • Fast-bind , notify –bind • Bind sometimes ,not all the time ?
  26. 26. 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())
  27. 27. 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

×