Controller Naming in Components

Angular 1.5 components default controllerAs values to $ctrl and directives & registered controllers both need an explicit controller name, so what are the best practices for naming Angular controllers?

$ctrl, the good and bad

There’s some benefit to the fact that Angular explicity sets a default controllerAsvalue on a component. For one, extremely simple components can be slimmed down in its definition. In addition, you don't have any runtime errors that are thrown like you would with a directive that has a controller definition, but no controllerAs value.

<!-- Component.html -->  
<span>Hello, <span ng-bind="$"></span></span>
<img src="kitty.gif" />
// Component.js
import template from './Component.html';
angular.module('ew', [])
.component('hello', {
bindings: {
name: '@'
.component('anotherExample', {
controller: class {
constructor() {
this.answer = 42;
template: '<span>The answer is <span ng-bind="$ctrl.answer"></span></span>'

My preferences on naming

Capitalization — Controller names should be PascalCase. The capitalization of the first character separates it from a potential property on the $rootScope (which is bad practice anyway!). Most JS developers wouldn't name properties using PascalCase, so conforming to PascalCase for controllers can create that separation.
The use of "ctrl" or "controller" in the controller name - In my opinion, adding either of these to the name is unnecessary. If the above practice is used for casing your controller properly, it should be easily identified as a controller anyhow. Now you're just making me type more!
Naming - Lastly, and this should be relatively obvious, the name should reflect the component's name. Doing so adds context to the bindings used throughout the DOM and makes reading a DOM structure much easier.

Front End Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store