AngularJs , How it works
-
Upload
jayantha-sirisena -
Category
Software
-
view
1.322 -
download
0
description
Transcript of AngularJs , How it works
![Page 1: AngularJs , How it works](https://reader033.fdocuments.in/reader033/viewer/2022052905/558782c8d8b42a977d8b45b2/html5/thumbnails/1.jpg)
Dive in
![Page 2: AngularJs , How it works](https://reader033.fdocuments.in/reader033/viewer/2022052905/558782c8d8b42a977d8b45b2/html5/thumbnails/2.jpg)
Two way bindings
![Page 3: AngularJs , How it works](https://reader033.fdocuments.in/reader033/viewer/2022052905/558782c8d8b42a977d8b45b2/html5/thumbnails/3.jpg)
var model={ myName: ”test”}
<input type=“text” bind=“myName” />
![Page 4: AngularJs , How it works](https://reader033.fdocuments.in/reader033/viewer/2022052905/558782c8d8b42a977d8b45b2/html5/thumbnails/4.jpg)
Dirty checking vs. Observables
![Page 6: AngularJs , How it works](https://reader033.fdocuments.in/reader033/viewer/2022052905/558782c8d8b42a977d8b45b2/html5/thumbnails/6.jpg)
Update me when myName is changed
data-bind=“value:myName”
Observable (view model)
![Page 7: AngularJs , How it works](https://reader033.fdocuments.in/reader033/viewer/2022052905/558782c8d8b42a977d8b45b2/html5/thumbnails/7.jpg)
myName = function(name){ myName=name; //notify all listeners of “myName”}
![Page 11: AngularJs , How it works](https://reader033.fdocuments.in/reader033/viewer/2022052905/558782c8d8b42a977d8b45b2/html5/thumbnails/11.jpg)
ng-bind=“myName”
Update me when myName is changed
Added to watch list
![Page 12: AngularJs , How it works](https://reader033.fdocuments.in/reader033/viewer/2022052905/558782c8d8b42a977d8b45b2/html5/thumbnails/12.jpg)
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
![Page 13: AngularJs , How it works](https://reader033.fdocuments.in/reader033/viewer/2022052905/558782c8d8b42a977d8b45b2/html5/thumbnails/13.jpg)
$rootScope
child1child2
child3 child4
$rootScope.$digest()
$child1Scope.$digest()$child2Scope.$digest()
$child4Scope.$digest()$child3Scope.$digest()
![Page 14: AngularJs , How it works](https://reader033.fdocuments.in/reader033/viewer/2022052905/558782c8d8b42a977d8b45b2/html5/thumbnails/14.jpg)
$rootScope.$digest()
$child1Scope.$digest()$child2Scope.$digest()
$child4Scope.$digest()$child3Scope.$digest()
$child2Scope.$apply()
$rootScope
child1child2
child3 child4
![Page 15: AngularJs , How it works](https://reader033.fdocuments.in/reader033/viewer/2022052905/558782c8d8b42a977d8b45b2/html5/thumbnails/15.jpg)
$child1Scope.$digest()
$child4Scope.$digest()$child1Scope.$digest()
$rootScope
child1child2
child3 child4
![Page 17: AngularJs , How it works](https://reader033.fdocuments.in/reader033/viewer/2022052905/558782c8d8b42a977d8b45b2/html5/thumbnails/17.jpg)
Computed properties
fullName = firstName+ “ ”+ lastName
![Page 18: AngularJs , How it works](https://reader033.fdocuments.in/reader033/viewer/2022052905/558782c8d8b42a977d8b45b2/html5/thumbnails/18.jpg)
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
![Page 19: AngularJs , How it works](https://reader033.fdocuments.in/reader033/viewer/2022052905/558782c8d8b42a977d8b45b2/html5/thumbnails/19.jpg)
Performance considerations and best practices
• When it is slow ?
$scope.$apply() > 25ms
![Page 20: AngularJs , How it works](https://reader033.fdocuments.in/reader033/viewer/2022052905/558782c8d8b42a977d8b45b2/html5/thumbnails/20.jpg)
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
![Page 21: AngularJs , How it works](https://reader033.fdocuments.in/reader033/viewer/2022052905/558782c8d8b42a977d8b45b2/html5/thumbnails/21.jpg)
$digest vs. $apply
• Use $digest whenever it’s possible
![Page 22: AngularJs , How it works](https://reader033.fdocuments.in/reader033/viewer/2022052905/558782c8d8b42a977d8b45b2/html5/thumbnails/22.jpg)
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
![Page 23: AngularJs , How it works](https://reader033.fdocuments.in/reader033/viewer/2022052905/558782c8d8b42a977d8b45b2/html5/thumbnails/23.jpg)
$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);
}
![Page 24: AngularJs , How it works](https://reader033.fdocuments.in/reader033/viewer/2022052905/558782c8d8b42a977d8b45b2/html5/thumbnails/24.jpg)
Watch only what is needed
$watch(someObject,function(){
})
$watch(someObject,function(){
},true )
Deep Watch shallow watch
![Page 25: AngularJs , How it works](https://reader033.fdocuments.in/reader033/viewer/2022052905/558782c8d8b42a977d8b45b2/html5/thumbnails/25.jpg)
$watch vs. $watchCollection
• $watchCollection will watch only one step deep
• Use $watchCollection if possible
![Page 26: AngularJs , How it works](https://reader033.fdocuments.in/reader033/viewer/2022052905/558782c8d8b42a977d8b45b2/html5/thumbnails/26.jpg)
Directives for Performance improvements• Bind once
• Fast-bind , notify –bind
• Bind sometimes ,not all the time ?
![Page 27: AngularJs , How it works](https://reader033.fdocuments.in/reader033/viewer/2022052905/558782c8d8b42a977d8b45b2/html5/thumbnails/27.jpg)
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())
![Page 29: AngularJs , How it works](https://reader033.fdocuments.in/reader033/viewer/2022052905/558782c8d8b42a977d8b45b2/html5/thumbnails/29.jpg)
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