Angular ngPerf

version 0.1

ngPerf is a tiny module (485 bytes minified) to help you measure the loading time of the various components of your single-page-application.

Installation

Download and place the script before your angular application script and after the core angular module.

    <script src="angular.min.js"></script>
    <script src="angular-ngperf.min.js"></script>
    <script src="yourApp.js"></script>

Then inject the module into your application:

angular.module('yourApp',['angular-ngperf']);

Include the ng-perf directive in the components you want to measure. e.g.

<nav class="navbar navbar-default"
    ng-perf
    ng-perf-enable="true"
    ng-perf-name="navbar"
    ng-perf-threshold="10">

  <div class="container-fluid">
    <div class="navbar-header"
        ng-perf
        ng-perf-enable="true"
        ng-perf-name="navbar-header"
        ng-perf-threshold="300">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
  </div>
</nav>

Load the page and open the console on the developers tools, you will see something like:

Options

Options	Type	Explanation
ng-perf-enable	boolean	Enable/Disable, default true
ng-perf-threshold	number (in ms)	Determines the performance budget threshold, default 200
ng-perf-name	string	The name of the component on the log

Βrowser support table