Part 1: in this part we will understand the basics of our project folder structure.
After investigating a bit on internet, I have found this page about how to structure an Angular 17 project, and I think is very accurate and interesting: Folder Structure | Velzon – Angular 17 Admin & Dashboard Template Documentation (themesbrand.com)
In our case, we will follow some of these recommendations and we will add our own criteria as well to structure our project files.
In this image we can see the idea that we want to reach regarding some of the main components that we will use in this magazine example.
When we create an Angular 17 project, the initial source folder has this structure
We will add these folders inside our app directory
Folder: app/iam/
Description:
Identity Access Management files, like:
- OAuth 2.0 Aauthentication services and libraries
- Authentication guards
- Login component
- Register component
- Profile component
Folder: app/cms/
Description:
All services to manage WordPress content APIs will be done from here.
Folder: app/layouts/
Description:
All layout components related Files, like:
- Header component
- Horizontal navigation component
- Right sidebar component
- Footer component
Folder: app/sections /
Description:
All section components related to this project.
- Home component
- News component
- Events component
- Companies component
- People component
- How-to component
- Contact-us component
Folder: app/shared/
Description:
Referred to commonly used components like:
- Interfaces
- Enums
- JSON Data Model for prototyping
- Modal component
- Spinner component
- Pipes
After creating the folder structure in our app, this is how is looking
IMPORTAN NOTE: Please be aware that later on, in the next chapter, we will add a very important component at the app folder level, we are talking about the component that will contain our single page application wrapper, in our case it will be called as magazine component.
To be continue in this article:
In the next article (Part 2) we will:
- Create the login component inside iam folder
- Crate inside app folder our magazine component that will be functioning as our single page application wrapper
- Create our magazine section components inside section folder
- Create our routers inside our app folder
- Create authentication services and JSON Web Token (JWT) http interceptors inside iam folder
- Create our basic authentication flow using our iam services
- Create our authentication guards inside iam folder
- Use as reference AyyazTech tutorial: https://www.youtube.com/watch?v=Nh6l9uzU6dg&t=31s
Leave a Reply