wrench7 / angular-fng

Faster event directives for angular. Trigger $digests in a specified $scope

#angular-fng

angular-fng (faster angular) are performance focused event directives, which behave the same as the ng-event directives (e.g. ng-click, ng-mousedown, etc..). But instead of always triggering a global root scope digest, angular-fng can trigger a partial (or local) scope digest, reducing app refreshes and increasing performance.

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:

• fng-click
• fng-dblclick
• fng-mousedown
• fng-mouseup
• fng-mouseover
• fng-mouseout
• fng-mousemove
• fng-mouseenter
• fng-mouseleave
• fng-keydown
• fng-keyup
• fng-keypress
• fng-submit
• fng-focus
• fng-blur
• fng-copy
• fng-cut
• fng-paste

Why

Not sure what's it all about? Have a read here: http://www.adamcraven.me/increasing-performance-on-large-angular-apps/

Requirements

• Angular 1.2.0 or greater - May work on older versions.

Installation

• bower: bower install angular-fng --save
• npm: npm install angular-fng --save
• Or download from github: angular-moment.zip

Include angular-fng after angular.js has been loaded.

<script src="components/angular-fng/angular-fng.js"></script>

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

Usage

To enable add fng module your apps main module:

angular.module('myApp', ['fng'])

Enable by setting on your chosen module's scope:

$scope.$stopDigestPropagation = true

Then replace all uses of the ng-event directives with fng:

<a fng-click="ctrl.click()">Click Me</a>

How it works

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.

###How to chose where to digest

It is not recommended that these are used at low levels, such as in individual components. The live search component mentioned before 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.