Front End Style Guide - Angular

angular-style.md

This is a work in progress - please modify and comment!

Coding Style

• Any HTML templates should live in separate files in the "/template" directory, rather than as inline strings
  • PREREQUISITE: [ ] pre-compile and bundle templates with grunt to avoid proliferation of XHR requests
• Use minimal plugin configs (eg. gridOptions for ng-grid): defer to defaults where possible. Same goes for other plugins - avoid lengthy configs where possible
• Use extend, in order to add structure to property declarations:

  // before
  $scope.foo = 1;
  $scope.bar = 2;
  $scope.baz = function() { ... }
  
  // after
  angular.extend($scope, {
    foo: 1,
    bar: 2,
    baz: function() { ... }
  });

• Table data manipulation (searching, sorting, etc.) for large data sets (>10 rows) should take place server side.

Modules

• Use NPM modules where useful.

  • External modules must be well tested and documented.
  • External modules must be kept in the default "node_modules" folder.
  • Check external dependencies into the git repo (to prevent build issues if NPM is down at build time).
  • Avoid modifying external modules.
  • After NPM-installing a module, require it CommonJS style. Eg.

  // good
  require('module');
  
  // bad
  require('../node_modules/module/module.js');

  • Declare dependency versions using fuzzy versioning, eg. 1.1.x (more about semver)

Standard Modules

• Grid: Turntable
• Infinite scroll view: turn/infinite-scroll
• Autocomplete:
  • Select2
  • Typeahead

Modules to avoid

• BinaryMuse/ngInfiniteScroll
  • fires continuously onScroll which causes significant UI lag
  • many open issues
• ng-grid
  • too many features, sloppy code, and low test coverage
  • many outstanding issues
  • goes to extreme lengths to avoid using <table>s
  • weird workarounds for standard use cases, see here

Optimizing Slow Angular Code

• http://www.bennadel.com/blog/2556-Using-Track-By-With-ngRepeat-In-AngularJS-1-2.htm
• http://blog.scalyr.com/2013/10/31/angularjs-1200ms-to-35ms/

Angular tips & tricks

• https://github.com/angular/angular.js/wiki/When-to-use-$scope.$apply()