Skip to content

Latest commit

 

History

History
38 lines (29 loc) · 2.11 KB

2016-01-01-angularjs-digest-vs-apply.md

File metadata and controls

38 lines (29 loc) · 2.11 KB
layout title tip-number tip-username tip-username-profile tip-tldr categories
post
AngularJs - `$digest` vs `$apply`
1
loverajoel
JavaScript modules and build steps are getting more numerous and complicated, but what about boilerplate in new frameworks?
en

One of the most appreciated features of AngularJs is the two-way data binding. In order to make this work AngularJs evaluates the changes between the model and the view through cycles($digest). You need to understand this concept in order to understand how the framework works under the hood.

Angular evaluates each watcher whenever one event is fired. This is the known $digest cycle. Sometimes you have to force it to run a new cycle manually and you must choose the correct option because this phase is one of the most influential in terms of performance.

$apply

This core method lets you to start the digestion cycle explicitly. That means that all watchers are checked; the entire application starts the $digest loop. Internally, after executing an optional function parameter, it calls $rootScope.$digest();.

$digest

In this case the $digest method starts the $digest cycle for the current scope and its children. You should notice that the parent"s scopes will not be checked. and not be affected.

Recommendations

  • Use $apply or $digest only when browser DOM events have triggered outside of AngularJS.
  • Pass a function expression to $apply, this has an error handling mechanism and allows integrating changes in the digest cycle.
$scope.$apply(() => {
	$scope.tip = "Javascript Tip";
});
  • If you only need to update the current scope or its children, use $digest, and prevent a new digest cycle for the whole application. The performance benefit is self-evident.
  • $apply() is a hard process for the machine and can lead to performance issues when there is a lot of binding.
  • If you are using >AngularJS 1.2.X, use $evalAsync, which is a core method that will evaluate the expression during the current cycle or the next. This can improve your application"s performance