Post/Code

HomeAboutUsesNow

TypeScript Fundamentals and AngularJS Performance.

  • Completed the videos for Ultimate Angular Typscript Fundamentals and AngularJS Performance | Link
  • ng-repeats through large data collections can be batched in order to increase performance. | Link
  • Using 'track by' on ng-repeat is more performant as AngularJS does not need to attach its own keys at run-time
  • ng-if is more perfomant than ng-show/ng-hide as AngularJS does not need to set watchers on each instance. It destroys them when no longer required.
  • Use ng-model-options with debounce on input fields as it will reduce the number of digest cycles required. This also delays the evaluation so that you do not need to instantly display validation and can wait a little while.
  • When using AngularJS expressions, you can limit the evaluations required by AngularJS storing an evaluation in a value so that AngularJS does not need to evaluate the terms or function on each digest cycle. If the evaluation is only needed once, the bind-once syntax of :: can be used.
  • http calls can be batched if within +- 10 milliseconds of each by using

    angular
    .module('app', [])
    .config(function ($httpProvider) {
    	$httpProvider.useApplyAsync(true);
    });
    
  • Strict Dependency Injection (Strict DI) can be used for minification for performance as follows:

    controller: ['CounterService', function (CounterService) {
    this.$onInit = function () {
      this.count = CounterService.getInitialCount();
    };
    this.increment = function () {
      this.count = CounterService.incrementCount(this.count);
    };
    this.decrement = function () {
      this.count = CounterService.decrementCount(this.count);
    };
    }]
    
  • On production builds, there is no need for all the AngularJS specific .data that gets added at runtime. This can be turned off by doing:

    angular
    .module('app', [])
    .config(function($compileProvider) {
    	$compileProvider.debugInfoEnabled(false);
    })
    ;
    
  • The $onDestroy lifecycle hook can be used on AngularJS ^1.5 to do garbage collection and remove data bindings, especially when using things like EventHandlers. This can save significantly on memory usage during the lifespan of the Single Page Application.