All projects starts with the question: How should I start? Let’s focus. How should I keep my Angular Project extendable, modern, clean and easy to handle? Look at this structure, I just love it:
-
Screen A:
- /+state
- /component
- /model
- /container
- /services
- module.ts
- routing.ts
-
Screen B:
- /+state
- /component
- /model
- /container
- /services
- module.ts
- routing.ts
- /shared
- /core
- module.ts
- routing.ts
- component.ts
Looks weird? Ok, I will explain to you.
Building a huge application means an enormous mindset of organisation. We should try that either your URL structure or your navigation menu is matching the structure of you angular project.
Imagine you are implementing two Screens independently then it is recommend to check if there are any shared or core features that can be outsourced to the sahred or core folder structure. If you are e.g. using Sessions than this is a core feature hence it will keep your whole application in a specific state. But if you are using one component in more than one Screen than you can imlpement it in your shared section.
Alright, this is shared and core. Let’s have a deeper look into the Screen Structure itself.
Every Screen should be organized in the same way. We should have state management (+state folder) where we can provide the screen related Store like actions, reducers, selectors, facade and effects.
Afterwards we need to define all the components that our screen consists of. Create for each component a subfolder in the component folder to manage these components.
The model is clear, this is used to manage all you models or interfaces of this screen.
In your service folder are all calls to the Store or to any king of http services provided.
The container will now combine everything and build your final screen. This is your „Screen“.
Interested in knowing more about it?