Recognizing AngularJS landmines

Implementation of configurations and combinations that lead to severe performance degradation is often difficult to pinpoint as the contributing components by themselves often appear to be totally innocuous.

How to do it…

The following scenarios are just a handful of the commonly encountered scenarios that degrade the application's performance and responsiveness.

Expensive filters in ng-repeat

Filters will be executed every single time the enumerable collection detects a change, as shown here:

<div ng-repeat="val in values | filter:slowFilter"></div>

Building and using filters that require a great deal of processing is not advisable as you must assume that filters will be called a huge number of times throughout the life of the application.

Deep watching a large object

You might find it tempting to create a scope watcher that evaluates the entirety of a model object; this is accomplished by passing in true as the final argument, as shown here:

$scope.$watch...