Enhancing AngularJS's change detection

Now, let's take a step back and again think about the change detection mechanism of the framework.

We said that inside the digest loop, Angular evaluates registered expressions and compares the evaluated values with the values associated with the same expressions in the previous iteration of the loop.

The most optimal algorithm used for the comparison may differ depending on the type of the value returned from the evaluation of the expression. For instance, if we get a mutable list of items, we need to loop over the entire collection and compare the items in the collections one by one in order to verify if there is a change or not. However, if we have an immutable list, we can perform a check with a constant complexity, only by comparing references. This is the case because the instances of immutable data structures cannot change: instead of mutating the instance, we'll get a new reference with the modification applied.

In AngularJS, we can add watchers using a few methods. Two of them are $watch(exp, fn, deep) and $watchCollection(exp, fn). These methods give us some level of control over the way the change detection will perform the equality check. For example, adding a watcher using $watch and passing a false value as a third argument will make AngularJS perform a reference check (that is, compare the current value with the previous one using ===). However, if we pass a truthy (any true value), the check will be deep (that is, using angular.equals). This way, depending on the expected type of the returned by the expression value, we can add listeners in the most appropriate way in order to allow the framework to perform equality checks with the most optimal algorithm available. This API has two limitations:

• It does not allow you to choose the most appropriate equality check algorithm at runtime
• It does not allow you to extend the change detection to third parties for their specific data structures

The Angular core team assigned this responsibility to differs, allowing them to extend the change detection mechanism and optimize it, based on the data we use in our applications. Angular defines two base classes, which we can extend in order to define custom algorithms:

• KeyValueDiffer: This allows us to perform advanced diffing over key value-based data structures
• IterableDiffer: This allows us to perform advanced diffing over list-like data structures

Angular allows us to take full control over the change detection mechanism by extending it with custom algorithms or configuring it appropriately, which wasn't possible in AngularJS. We'll take a further look into the change detection and how we can configure it in Chapter 5, Getting Started with Angular Components and Directives.