Angular Folder Structure – Tom Cowley – Medium
- I found that kind of interesting, as I don’t tend to think about apps as having pages so much, however websites typically do.However, in Angular, a page is a component, or at least a collection of components.
- So, I was keen to bring in the idea of pages in order to lighten that components folder.In order to decide what was a page and wasn’t, I simply looked towards the url we have login, dashboard and organisation, which are already modules.
- In addition there is also a robot page, which can again have its’ own page.In reality, each of these pages is simply a component.
- Well they’re closely coupled with the router, and for most modules, we have a corresponding page, it makes sense to put them in the module folder.But wait, if we’re putting the ‘page’ component with the module, why don’t we just put all related components for a module in the module…
- Putting that altogether…- app.module.ts- app.component.ts- modules – login – components – input input.component.ts – pwCheck pwCheck.component.ts – pages – login login.page.ts login.service.ts login.module.ts login.routes.ts – organisation – components – input input.component.ts – pwCheck pwCheck.component.ts – pages – organisation organisation.page.ts – robot robot.page.ts organisation.service.ts organisation.module.ts organisation.routes.ts- shared – components – mocks…
I’ve been working on an Angular application for a couple of months now. One of the things that has changed most often is the folder structure. It’s something that I end up obsessing over. I’ve gone…
I’ve been working on an Angular application for a couple of months now. One of the things that has changed most often is the folder structure. It’s something that I end up obsessing over. I’ve gone through a couple of different structures, and no doubt will change my mind again in the future, but wanted to share my thoughts here.
A logical place to start is the official style guide from John Papa:
I had initially thought that there would be a completely defined way of how to structure folders, but actually the advice makes a lot more sense. Different projects will simply have different requirements, and the idea of one size fits all, like so many other things, simply wont always work.
Have a near-term view of implementation and a long-term vision. Start small but keep in mind where the app is heading down the road.
That is taken from the style guide. Start small. The best place to start with that is the CLI.
folder, where all the actual logic is going to go. It looks something like this:
In actuality each of those files is then broken down into their .html and .scss counterparts.
Pretty soon on, we want to start adding some services to share the logic between the components, and to fetch data. We then want to add some models to model the data. And then some mocks to test those services. At…