Naming Conventions

Good naming conventions are important for providing consistent and predictable ways to find content. This page lists the naming conventions we follow. We started with John Papa's naming guidelines and mixed in our opinion to come up with these recommendations.

File Names

• File names should be all lowercase, using dots as primary separators and dashes as secondary separators. The recommended pattern is feature[.stereotype].filetype (stereotype is optional if it is obvious).
• Examples:
  • dashboard.html
  • dashboard.scss (or _dashboard.scss if it is a partial)
  • dashboard.directive.js
  • account-dialog.controller.js
  • account.service.js

Directive Names

• Register directives using lowerCamelCase with a short prefix (e.g. company prefix or project prefix). The prefix reduces the possibility of name collisions in HTML markup.
• Example:

  angular.module('app.dashboard')
      .directive('tmplDashboard', directiveFunction);
  
  // ----- directiveFunction -----
  directiveFunction.$inject = [...];
  
  /* @ngInject */
  function directiveFunction(...) {
      ...
  }

- Note that the name of the directive function is very generic: `directiveFunction`. This makes the code very consistent and predictable.

### Controller Names
- Register controllers using `UpperCamelCase` as they are constructors.
- Example:
    ```javascript
    angular.module('app.dashboard')
        .controller('DashboardController', ControllerFunction);

    // ----- ControllerFunction -----
    ControllerFunction.$inject = [...];

    /* @ngInject */
    function ControllerFunction(...) {
        ...
    }

• Note that the name of the controller function is very generic: ControllerFunction. This makes the code very consistent and predictable.

Service/Factory Names

• Register services and factories using lowerCamelCase. Do not prefix with $ - this is to avoid name collisions with Angular's services and factories.
• Example:

  angular
      .module('app.core')
      .factory('accountService', serviceFunction);
  
  serviceFunction.$inject = [...];
  
  /* @ngInject */
  function serviceFunction(...) {
  }

- Note that the name of the service function is very generic: `serviceFunction`. This makes the code very consistent and predictable.