File naming conventions for styles/templates

[evanplaice]

The current structure assumes that the html and css files are tightly bound to a specific component. Which is fine but the file type is the only indicator of it's usage. Currently html/css are the only supported formats but consider where future support may be added (by plugins or otherwise) for other formats (ex liquid, scss).

What I suggest is labeling the HTML/CSS files with a suffix that describes their role.

before:

...
|-- app
|   |-- hero
|   |   |-- hero-detail.component.html
|   |   |-- hero-detail.component.css
|   |   |-- hero-detail.component.spec.ts
|   |   |-- hero-detail.component.ts
|   |   |-- hero-list.component.html
|   |   |-- hero-list.component.css
|   |   |-- hero-list.component.spec.ts
|   |   |-- hero-list.component.ts
|   |   |-- hero-root.component.spec.ts
|   |   |-- hero-root.component.ts
|   |   |-- hero.service.spec.ts
|   |   |-- hero.service.ts
|   |-- ...
|-- app.ts
...

after:

...
|-- app
|   |-- hero
|   |   |-- hero-detail.view.html
|   |   |-- hero-detail.view.css
|   |   |-- hero-detail.component.spec.ts
|   |   |-- hero-detail.component.ts
|   |   |-- hero-list.view.html
|   |   |-- hero-list.view.css
|   |   |-- hero-list.component.spec.ts
|   |   |-- hero-list.component.ts
|   |   |-- hero-root.component.spec.ts
|   |   |-- hero-root.component.ts
|   |   |-- hero.service.spec.ts
|   |   |-- hero.service.ts
|   |-- ...
|-- app.ts
...

When other platforms are better supported, this can be extended to define platform-specific views.

example:

...
|-- app
|   |-- hero
|   |   |-- hero-detail.view.html
|   |   |-- hero-detail.view.css
|   |   |-- hero-detail.mobile.html
|   |   |-- hero-detail.mobile.css
|   |   |-- hero-detail.desktop.html
|   |   |-- hero-detail.desktop.css
|   |   |-- hero-detail.component.spec.ts
|   |   |-- hero-detail.component.ts
|   |   |-- hero-list.view.html
|   |   |-- hero-list.view.css
|   |   |-- hero-list.mobile.html
|   |   |-- hero-list.mobile.css
|   |   |-- hero-list.desktop.html
|   |   |-- hero-list.desktop.css
|   |   |-- hero-list.component.spec.ts
|   |   |-- hero-list.component.ts
|   |   |-- hero-root.component.spec.ts
|   |   |-- hero-root.component.ts
|   |   |-- hero.service.spec.ts
|   |   |-- hero.service.ts
|   |-- ...
|-- app.ts
...

[joshwiens]

I personally like this tweak to the naming conventions.
20 files in that list and I can easily pick up on the purpose of each having never looked at the directory.

Makes it simple for someone to step into the code for the first time and have a clue what's going on without digging around in files.

[filipesilva]

The CLI right now is not very consistent with file naming across code blueprints, but there is a rework of that coming soon. It'll follow the same recommendations present on www.angular.io though.

[evanplaice]

@filipesilva I raised the issue because angular.io lacks guidance in terms of file naming and directory structure and we're trying to nail down a good file naming convention in the angular2-style-guide.

The discussion and specifics can be found here and here.

For now, the style guide will likely just stick to the convention already used by angular-cli.

...
|-- app
|   |-- hero
|   |   |-- hero-detail.component.html
|   |   |-- hero-detail.component.css
|   |   |-- hero-detail.component.spec.ts
|   |   |-- hero-detail.component.ts
|   |   |-- hero-list.component.html
|   |   |-- hero-list.component.css
|   |   |-- hero-list.component.spec.ts
|   |   |-- hero-list.component.ts
|   |   |-- hero-root.component.spec.ts
|   |   |-- hero-root.component.ts
|   |   |-- hero.service.spec.ts
|   |   |-- hero.service.ts
|   |-- ...
|-- app.ts
...

I'd be interested to see how the file structure will look for components that support multiple platforms (ie mobile, desktop, browser).

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}