angular-stats

Little utility to show stats about your angularjs app

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
32Jun 15, 2021Feb 14, 2017Minified + gzip package size for angular-stats in KB

Readme

Angular Stats

This is a lightweight utility that gives you some statistics about your angularjs application. In particular, you get the

  1. number of scopes,
  2. number of watchers,
  3. number of DOM elements,
  4. duration of digest cycles,

For every angularjs component where you define the property name, you get also

  1. Number of watchers per component.

The property name can be defined on your controller class or binded to the scope. The module has been developed usign Typescript and is exported as UMD, so you can use a module resolver (Webpack / Browserify) in order to import it or add it globally.

Requirements

  1. AngularJs 1.5+ (it doesn't require jQuery)

  2. The utility is not working with angular >= 2.x

Installation

npm install angular-stats --save

Build

npm run build

Usage

// --- app.module.ts ---
// Typescript + ES2015 modules

import { angularStats } from "angular-stats";

export const app = angular.module("myApp", [angularStats])
    .component("app", AppComponent)
    .name;


// --- app.component.ts ---
// ...define your AppComponent using an AppController like this: 

import { IAngularStats } from "angular-stats";

export class AppController {
    private document: ng.IDocumentService;
    private angularStats: IAngularStats;
    
    static $inject = ["AngularStats"];

    constructor($document: ng.IDocumentService, 
                AngularStats: IAngularStats) {
        this.document = $document;
        this.angularStats = AngularStats;
        this.name = "AppComponent";
    }
    
    get analysis(): string {
        return "<pre>" + this.angularStats.analyzeWebApp() + "</pre>";
    }

    $onInit() {
        /**
        * By default, AngularStats will search for
         * an element like <app></app>. If you want 
         * to change it, set a different starting
         * element (element: JQLite)
        */
        this.angularStats.setStartingElement(this.document.find("my-element"));
    }
}
// Javascript

angular.module("myApp", ["angular-stats"])
    .controller("AppController", ["$scope", "AngularStats", function($scope, AngularStats) {
        
        this.$onInit = function() {
            $scope.name = "AppComponent";
            /**
            * By default, AngularStats will search for
             * an element like <app></app>. If you want 
             * to change it, set a different starting
             * element (element: JQLite)
            */
            AngularStats.setStartingElement($document.find("my-element"));
        };
        
        $scope.getStats = function() {
            return "<pre>" + AngularStats.analyzeWebApp() + "</pre>";
        };
}]);

If you bundle app and vendors in two different bundles, require the module using angular-stats

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.