Time to digest AngularJs

Time to digest a bunch of times with interpolation

by Antério Vieira

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div class="measure" ng-if="measure">{{ measure }} ms</div>
<with-interpolation ng-repeat="i in itens" ></with-interpolation>

CSS

.measure {
  position: absolute;
  font-weidth: bold;
  left: 150px;
  padding: 10px;
  border: 1px solid #eee;
}

JavaScript

angular.module('app', [])

.component('withInterpolation', {
	template: '<div>{{ $ctrl.name }}<div>',
  controller: class InterpolationCtrl 
  {
  
  	$onInit () {
    	this.name = 'Random number ' + this._random()
    }
    
    _random () {
    	return parseInt(Math.random() * 100)
    }
    
  }
})
.run(($rootScope) => {
		$rootScope.$apply(function() {
        $rootScope.itens = [...Array(1000).keys()];
    });

	  setTimeout(function() {
      var start = Date.now();
      for (var i = 0; i < 20000; i++) {
        $rootScope.$digest();
      }
      var end = Date.now();
      var time = end - start;
      $rootScope.$apply(function() {
        $rootScope.measure = time;
      });

    }, 1000);
})

angular.bootstrap(document, ['app'])