Saturday, August 15, 2015

Some questions and answers regarding angularjs data binding that all angularjs learner should know

Q. What is two way data binding?
A. In javaScript we can store data either using any primitive data type like number, string etc Or any object like array, json object etc but primitive data type is not suitable for managing sequential collection of data so we normally use object (in javaScript array is also object) instead of the primitive data type most of the cases.  These objects known as Model. We process these objects for presenting to the users through browser screen that we addressed as View.  If we do any changes in our model, angularjs will reflect these to the view. What will happen, if we have a way to change any model properties from the view section? Yes, angularjs permit us to modify model properties from the view. So if we change any model properties from the view, it will also reflect that change in the model. This is called two way data binding.

Q. How does angularjs detect the model changes?
A. In angulars $scope is the mother object for data sharing between model and view.  It let us share any method or properties with view, that means if we want to share any method or properties with view these methods or properties should be member of this $scope object. So angularjs simply watch or observe $scope object in certain cases to check if there any changes that need to be reflected in the view. The process of checking the changes in the $scope object is termed as Dirty Checking as it checks the dirt/mutation of the object. angularjs uses a specially optimised loop for the purpose of Dirty Checking which is called digest cycle.

Q. What is digest cycle?
A.  $scope uses javascript prototypical inheritance for managing sub-scoping.  RootScope is the top of the prototypical chain. Every scope contain a properties watchers which contains a list of angular expressions that need to be observed.  angularjs keeps previous value of the each watcher so that it can check against with new value of the watched expression later. The checking of this old value Vs new value is just specially optimised while loop where angulars iterates each scope watchers until there is no changed value remains Or it exceeds the limit of iteration loop. This iteration continues from a particular scope to its child scope following the prototypical chain. The whole process can take a number of iterations to complete.

Q. How does angulajs add watcher to a scope?
A.  1. All angulajs expressions that have been used in the view will be added to the respective scope's watcher list automatically.
      2. Manually i.e. Whenever $ is used.

Q. Is there any permeant observer (i.e. or any timer) set for observing changes in the scope?
A. Is it fair? Definitely not.

Q. How does angularjs know when it needs to be run digest cycle?
A.  When there is a possibility of changing scope. For example, IO operation (e.g. ajax),  event (e.g. click, change). Thats why angularjs bound us to use ng-click instead of onclick, ng-change instead of onchange, $http service instead native ajax call, $timeout service instead settimeOut() so that it can run digest after completing event callback or ajax call or whatever.  Finally you can invoke scope.digest() or scope.apply() to run digest cycle on demands.

Q. Is there any difference between scope.digest() or scope.apply() ?
A. scope.apply() always start digest cycle iteration starting from rootScope whereas scope.digest() start digest cycle iteration starting from invoking scope. So whenever you are sure about scope changes and it won't affect parent scope, use scope.digest() instead of scope.apply() if you are caring about performance.

Use angularjs wisely :)

No comments: