Prefer having a consistent component name pattern JS-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', {});