Naming Conventions

Naming

Naming Guidelines

• Use consistent names for all components following a pattern that describes the component's feature then (optionally) its type. My recommended pattern is feature.type.js. There are 2 names for most assets:

  • the file name (avengers.controller.js)
  • the registered component name with Angular (AvengersController)

  Why?: Naming conventions help provide a consistent way to find content at a glance. Consistency within the project is vital. Consistency with a team is important. Consistency across a company provides tremendous efficiency.

  Why?: The naming conventions should simply help you find your code faster and make it easier to understand.

Controller Names

• Use consistent names for all controllers named after their feature. Use UpperCamelCase for controllers, as they are constructors.

  Why?: Provides a consistent way to quickly identify and reference controllers.

  Why?: UpperCamelCase is conventional for identifying object that can be instantiated using a constructor.

  /**
   * recommended
   */
  // avengers.controller.js
  angular
  .module
  .controller('HeroAvengersController', HeroAvengersController);
  function HeroAvengersController() { }

Directive Component Names

• Use consistent names for all directives using camel-case. Use a short prefix to describe the area that the directives belong (some example are company prefix or project prefix).

  Why?: Provides a consistent way to quickly identify and reference components.

  /**
   * recommended
   */
  // avenger-profile.directive.js
  angular
  .module
  .directive('xxAvengerProfile', xxAvengerProfile);
  // usage is <xx-avenger-profile> </xx-avenger-profile>
  function xxAvengerProfile() { }

Modules

• When there are multiple modules, the main module file is named app.module.js while other dependent modules are named after what they represent. For example, an admin module is named admin.module.js. The respective registered module names would be app and admin.

  Why?: Provides consistency for multiple module apps, and for expanding to large applications.

  Why?: Provides easy way to use task automation to load all module definitions first, then all other angular files (for bundling).

Configuration

• Separate configuration for a module into its own file named after the module. A configuration file for the main app module is named app.config.js (or simply config.js). A configuration for a module named admin.module.js is named admin.config.js.

  Why?: Separates configuration from module definition, components, and active code.

  Why?: Provides an identifiable place to set configuration for a module.