What happened to my.controller.ts, etc?

Thoughts on verbosity and the plethora of conventions within and amongst the various denizens of the file-naming community

or

The case for brevity

In a component based architecture, pretty much everything is a component which may consist of associated services, pipes and sub-components (typically not more than 3 levels deep and exhibiting a preference for composition via Import from npm).

For example:

src
├── app
│   ├── components
│   │   ├── about
│   │   │   ├── index.ts
│   │   │   ├── spec.ts
│   │   │   ├── style.scss
│   │   │   └── template.html
│   │   └── home
│   │       ├── components
│   │       │   └── my-sub-component
│   │       │       ├── index.ts
│   │       │       ├── services
│   │       │       │   └── other
│   │       │       │       ├── index.ts
│   │       │       │       └── spec.ts
│   │       │       ├── spec.ts
│   │       │       ├── style.scss
│   │       │       └── template.html
│   │       ├── index.ts
│   │       ├── pipes
│   │       │   ├── index.ts
│   │       │   └── spec.ts
│   │       ├── services
│   │       │   └── my-service
│   │       │       ├── index.ts
│   │       │       └── spec.ts
│   │       ├── spec.ts
│   │       ├── style.scss
│   │       └── template.html
│   ├── index.ts
│   ├── spec.ts
│   ├── services
│   │   └── api
│   │       ├── index.ts
│   │       └── spec.ts
│   ├── style.scss
│   └── template.html
├── bootstrap.ts
└── vendor.ts

As with 'component-name/index.ts', which has the shorthand:

'component-name'

omitting the '.component' part of:

'component-name/component-name.component.ts'

or

'component-name/index.component.ts'

serves to reduce clutter and improve readability.

Any ambiguity over what type of object (component, service, pipe) is removed by referencing the files grandparent rather than repeating '.component.' over and over.

This scheme has the added advantage of everything being self-contained. If the component is used by two or more components, simply move it up to the closest common parent, or better yet move it into its own repository if it is something that is useful in more than one project.

Why not follow the pattern used by React with JSX and forgo the parent directory altogether? Opinions differ on the utility of that approach, however, splitting script, html and css into separate files is one of the more obvious ways to reduce the overall sloc count in a file as well as simplifying the organization and aiding editor IntelliSense. Regardless, supporting utilities, tests and documentation would still require a wrapping parent folder.

see also