Conventions

##Style Guide Use Todd Mottos Angular Style Guide as a starting point

##Naming Conventions ####Directories/Modules All files that have a close relation should reside in the same file structure. This includes html, js, less/css, and unit test files.

Example
We have a module that is responsible for viewing a cluster. This would probably be called the cluster module. The file structure would look something like this:

app/scripts/modules 
├── cluster 
│   ├── cluster.module.js
│   ├── cluster.service.js
│   ├── cluster.service.spec.js
│   ├── clusterToggles.directive.html
│   └── clusterToggles.directive.js

####Javascript Files [moduleName].[artifactType].js

Artifact Types:

• controller
• service
• directive
• provider
• values
• constants

Examples
pipeline.controller.js
pipeline.service.js
pipelineSelector.directive.js

####Unit Test Files Name the tests the same as the file under test and append .spec.js

Example
File under test: pipeline.controller.js Test name

####Html Files ##Webpack Conventions With the introduction of webpack to the deck application we now have 2 module systems in play:

1. The angular module system which is used for Dependency Injection(DI).
2. The CommonsJS style that is used for file system level dependency resolution.

These 2 systems play nicely together as long as you follow a few conventions.

###Export Angular Module Name Any module that needs to be injected via angular needs to export (CommonsJS style) the name of the module.

File name: my.service.js

'use strict';

module.exports = angular
  .module('my.module.service', [])
  .factory('myService', function() {
    // service stuff
  })
  .name;   // <-- This returns the name of the module ('my.module.service') for Angular Dependency Injection.

We can require this CommonsJS style module by it’s relative path file name as an Angular dependency in another module.

'use strict';

module.exports = angular
  .module('my.controller.module', [
    require('./my.service.js')           //<- require by relative file path
  ])
  .controller('myController', function (‘myService’) {  //<- Angular DI
    //controller stuff
  })
  .name;

###Export HTML Files HTML templates can also be required via the CommonsJS. This is is useful for directives that that use templateUrl.

NOTE: The require statements needs to be outside the angular module declaration to ensure that the template is added to the the Angular $templateCache.

'use strict'

let myTemplate = require('../../pathTo.html');         // <- ensures added to $templateCache

module.exports = angular
  .module('my.module.name', [])
  .directive('myDirective', function() {
    return {
       templateUrl: myTemplate // <- a variable that resolves to the key in the $templateCache
    }
  })
  .name;