Prefer having a consistent component name patternJS-0538

It is recommended to use the same file names as the angular component name because it brings consistency and helps build tools. All components should follow a pattern that describes the component's feature then (optionally) its type for better naming convention. Thus, it provides a consistent way to identify components quickly. In addition, it provides pattern matching for any automated tasks.

Some example of file naming conventions

// controllers
avengers.controller.js
avengers.controller.spec.js

// services/factories
logger.service.js
logger.service.spec.js

Another common convention is naming controller files without the word controller in the file name, such as avengers.js instead of avengers.controller.js. All other conventions still hold using a suffix of the type. Controllers are the most common type of component, so this saves typing and is still easily identifiable.

Bad Practice

// invalid with filename: src/app/filters.js
app.filter('usefulFilter', function() {}); // error: Filename must be "usefulFilter.js"

Recommended

// valid with filename: myModule.js
angular.module('myModule', []);

// valid with filename: app/SomeController.js
app.controller('SomeController', function() {});

// valid with filename: app/utils/myUtils.js
app.factory('myUtils', function() {});

// valid with filename: src/app/awesomeModule/beautifulDirective.js
app.directive('beautifulDirective', function() {});

// valid with filename: src/app/awesomeModule/beautifulComponent.js
app.component('beautifulComponent', {});

References

• naming styleguide