AngularJs , How it works

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

Changed? No

Changes from last

loop ?

Watch list

Digest Loop

$scope.$digest()

Changed? No

Changed? No

$rootScope

child1child2

child3 child4

$rootScope.$digest()

$child1Scope.$digest()$child2Scope.$digest()

$child4Scope.$digest()$child3Scope.$digest()

$rootScope.$digest()

$child1Scope.$digest()$child2Scope.$digest()

$child4Scope.$digest()$child3Scope.$digest()

$child2Scope.$apply()

$rootScope

child1child2

child3 child4

$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 vs asynchronous bindings• Computed properties in dirty checking does not have a meaning like

in observables

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 do DOM access (DOM => cost ) inside the $watch functions

$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-Show directive shows or hides the given HTML element based on the expression

$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);

}

Watch only what is needed

$watch(someObject,function(){

})

$watch(someObject,function(){

},true )

Deep Watch shallow 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 will get right first.

• All code in AngularJS 2 is already being written in ES6.

• Faster change detection (Object.observe())

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