Table of contents

JavaScript

Angular

Javascript

Syntax

  • Use a 2-space tab to indent.
  • Always use single quotes.
  • Seperate Components with 3 Spaces
var name = 'bob';

function Person() {
  // two space tab indent
}



// 3 spaces
angular.app( ... )

Angular

Wrap Components in an IIFE

This helps remove variables from the global scope. More importantly, when minified, this helps avoid variable collisions.

(function() {
  'use strict';

  angular.module('app')
  
  .factory( ... );

})();

Keep Controllers Focused

Define a controller for a view, and try not to reuse the controller for other views. Instead, move reusable logic to factories and keep the controller simple and focused on its view.

Only presentational logic should be inside a controller, avoid Business logic (delegate to Services).

Nameing Angular Components

In order to avoid confusion, Angular components should be named after what they are. Controllers should be XxxCtrl, Factories should have XxxFactory, services should have XxxService, etc. 

.factory('LoginFactory', [function () {
	...
}

controllerAs with vm

Use a capture variable for this when using the controllerAs syntax. Choose a consistent variable name such as vm, which stands for ViewModel.

function Customer() {
    var vm = this;
    vm.name = {};
    vm.sendMessage = function() {
      ...
    };
}

Dependency Injection

When injecting dependencies into Controllers, Directives, Services, etc. make sure to use the inline array annotation. Code not using these annotations may not work as intended when minified/uglified/packed.

// BAD WAY 
lkModule.controller('LKCtrl', [function(dep1, dep2) {

  // ...

}]);

// GOOD WAY 👍
lkModule.controller('LKCtrl', ['dep1', 'dep2', function(dep1, dep2) {

  // ...

}]);