Basic Execution of Angular JS:

When the page is loaded in the browser, following things happen

  • When AngularJS starts your application, it parses and processes this new markup from the template using the compiler. The loaded, transformed and rendered DOM is then called the view.
  • AngularJS JavaScript file is loaded, the angular global object is created.
  • controller functions is executed.
  • Next AngularJS scans through the HTML to look for AngularJS apps and views. Once view is located, it connects that view to the corresponding controller function.
  • Next, AngularJS executes the controller functions. It then renders the views with data from the model populated by the controller. The page is now ready.

Angular Js worked on Digest Cycle concept.

What Is Angular JS Digest Cycle

Digest cycle is process by which angular js update its values and update DOM accordingly. We will see in details with below points.

  • Angular JS trigger $digest when it occurs change in Scope variable.
  • When $digest gets called angular goes through Watchers List that have been registered in current scope to check any updated information of any scope values in watches from watchers list. We called it as Dirty Checking.
  • Updated information get confirmed by value change occurs from watcher value function from current scope and watcher value function of previous scope.
  • If information gets update listener function gets called to update information.
  • If no change found digest move to next watch.
  • $digest check all watches till last watcher and again travel one more time to confirm where any change made. If it does not found any change digest cycle gets completed and DOM get refreshed.
  • $digest runs through all list up to 10 times to check watcher list update. If it will exceed more than 10 it will throw an exception to prevent infinite loops.

$Watch

  • Function create a watch of some variable from watchers list.
  • While registering watch need to pass two functions
    • Value Function
    • Listener Function
  • Value function return value which is being watched which get checked with value return last time.
  • When change in value occur listener function get called.

$digest

  • Function go through again all watches for $scope object and its child scope objects.
  • When digest run through again all watches it calls value function of each watch.
  • If value change occurs it calls listener function for that watch.
  • $digest gets called whenever Angular JS thinks it is necessary.

$apply

  • Whenever Angular JS does not call $digest function then in that case digest gets call manually by $scope.digest() and $scope.apply()
  • $apply take function as parameter which is executed and after that $digest get called internally.

Angular JS Learning Index


337 0 0