Search code examples
angularweb-component

File structure of a container component in Angular

I have to develop a layout component which have three sections: toolbar, sidebar and content:

Layout parts

Each one of its three parts is a component too.

My question is how should I structure the files that compound the layout component. Currently, I have this structure:

app
│
├───content
│       content.component.html
│       content.component.less
│       content.component.spec.ts
│       content.component.ts
│
├───layout
│       layout.component.html
│       layout.component.less
│       layout.component.spec.ts
│       layout.component.ts
│
├───sidebar
│       sidebar.component.html
│       sidebar.component.less
│       sidebar.component.spec.ts
│       sidebar.component.ts
│
└───toolbar
        toolbar.component.html
        toolbar.component.less
        toolbar.component.spec.ts
        toolbar.component.ts

And after reading the style guide of Angular, it seems that a flat structure is preferred over this another one:

app
│
│
└───layout
        layout.component.html
        layout.component.less
        layout.component.spec.ts
        layout.component.ts
            │
            │
            ├───content
            │       content.component.html
            │       content.component.less
            │       content.component.spec.ts
            │       content.component.ts
            │
            ├───sidebar
            │       sidebar.component.html
            │       sidebar.component.less
            │       sidebar.component.spec.ts
            │       sidebar.component.ts
            │
            └───toolbar
                    toolbar.component.html
                    toolbar.component.less
                    toolbar.component.spec.ts
                    toolbar.component.ts

But I think the second one makes more sense, because I don't plan to use the toolbar, sidebar and content components in any other place. In fact, I even don't know if their names should be prefixed with the layout word (layout-toolbar, layout-sidebar and layout-content).

What would be the recommended way of structuring my code in this case?

Solution

  • In the end, this is entirely up to you. Start out flat, and as the application grows, create directories to keep everything organised. I also prefer your second approach; group components together that are logically equivalent. A good article to help you structure: Angular Folder Structure