https://github.com/carlossalasamper/angular-clean-architecture
🧅 An Angular scaffold with a clean architecture that is easy to understand.
https://github.com/carlossalasamper/angular-clean-architecture
angular angular-scaffolding clean-architecture clean-code ddd ddd-architecture dependency-injection dependency-inversion scaffold web-development
Last synced: 8 months ago
JSON representation
🧅 An Angular scaffold with a clean architecture that is easy to understand.
- Host: GitHub
- URL: https://github.com/carlossalasamper/angular-clean-architecture
- Owner: carlossalasamper
- License: mit
- Created: 2023-12-29T11:27:05.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2025-01-28T07:27:59.000Z (9 months ago)
- Last Synced: 2025-01-28T08:24:57.619Z (9 months ago)
- Topics: angular, angular-scaffolding, clean-architecture, clean-code, ddd, ddd-architecture, dependency-injection, dependency-inversion, scaffold, web-development
- Language: TypeScript
- Homepage:
- Size: 695 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - angular-clean-architecture - An Angular scaffold with a clean architecture that is easy to understand. (Site Templates / Free Templates)
- trackawesomelist - angular-clean-architecture (⭐9) - An Angular scaffold with a clean architecture that is easy to understand. (Recently Updated / [Feb 28, 2025](/content/2025/02/28/README.md))
- fucking-awesome-angular - angular-clean-architecture - An Angular scaffold with a clean architecture that is easy to understand. (Site Templates / Free Templates)
README
# Angular Clean Architecture
An Angular scaffold with a clean architecture that is easy to understand.
## Features
- 🚀 [Angular 19](https://blog.angular.dev/meet-angular-v19-7b29dfd05b84)
- 📁 Clean architecture. Layered file structure
- 🛡️ TypeScript bulletproof typing
- 🎨 Design System and UI: [Tailwind CSS](https://tailwindcss.com/)
- 🖌️ Code format: [angular-eslint](https://github.com/angular-eslint/angular-eslint?tab=readme-ov-file#quick-start)
- 🧰 State Manager: [NgRx](https://ngrx.io/)
- 🐩 Git hooks: [Husky](https://www.npmjs.com/package/husky)
## 📁 Project File Structure
> ⚠️ What makes the implementation of the clean architecture concept more difficult in my opinion is that since it is defined theoretically, each person implements it using different terminology or omitting/adding some layers or pieces to simplify it or continue to make it more complex.
For this reason, I think it is important to emphasize the documentation that accompanies the architecture to avoid obstacles with the rest of the people who are going to work with this system.
I briefly explain each of the four layers that make up clean architecture within the /src folder:
```
└── /src
└── /app
├── /core # Core bounded context
│ └── /presentation
└── /post # Post bounded context
├── /domain
├── /application
├── /infrastructure
└── /presentation
```
### Domain
This layer contains all the enterprise business rules: entities, specifications...
### Application
This layer contains the use cases of the bounded context.
### Infrastructure
This layer contains the technical details (implementation) of the domain layer and third parties integrations.
### Presentation
This layer contains the React source code: views and controllers (Mobx controllers).
### Referencesw
- https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html
- https://jeffreypalermo.com/2008/07/the-onion-architecture-part-1/
## Development server
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
## Code scaffolding
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
## Build
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
## Running unit tests
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
## Running end-to-end tests
Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
## Further help
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.