Angular Core Dependency: >=1.2.0 <2.0
Module License: MIT
Added by: Sam Deering
Performance focused event directives, that act the same as the ng-event directives (ng-click, ng-mousedown, etc.). But instead of triggering a global root scope digest, it can trigger a partial scope digest, increasing performance and responsiveness.
Example: Simulated large app (Greater than 1000 watchers)
LEFT: Using ng-event. RIGHT: Using fng-event, not refreshing all the watchers in an app.
New directives defined, which can be used as a replacement or in addition to the default directives:
Not sure what's it all about? Have a read of: angular-fng - Improve the performance of large angular 1.x apps, by using faster event directives
bower install angular-fng --save
npm install angular-fng --save
Include angular-fng after angular.js has been loaded.
Or can be required in via require.js or other module loaders which support CommonJS or AMD module definition, just be sure that angular is loaded first
To enable add fng to your main module:
Enable partial digesting by setting $stopDigestPropagation on your chosen scope:
$chosenScope.$stopDigestPropagation = true
Then replace all uses of the ng-event directives with fng:
<a fng-click="ctrl.click()">Click Me</a>
When clicked, the digest will occur from the $chosenScope.
The fng events are opt-in directives, which behave the same as an ng event directive. However, it differs in one important way. When triggered (e.g. fng-click) it bubbles up the scope tree and searches for a defined $stopDigestPropagation property.
When found it will call a $digest in the scope where $stopDigestPropagation is set and checks all the child scopes as shown below:
If $stopDigestPropagation property isn't found, it will fallback to the default behaviour and act the same as the ng-event directives, calling a root scope digest:
Because they work the same as the existing ng-event directives, they can be dropped in and used as a replacement. That means all ng-keydowns can be converted to fng-keydowns, and so forth.
It is not recommended that these are used at low levels, such as in individual components. The live search component, mentioned in angular-fng - Improve the performance of large angular 1.x apps, by using faster event directives, would not implement $stopDigestPropagation property. It should be implemented at the module level, or higher. Such as a group of modules that relate to a major aspect of functionality on a page.
Module stats last updated: 2017-10-20 15:00:04