Angular Clean Architecture

This project aims to be a neat skeleton for a clean architecture implemented with Angular.

This example shows a management of tickets, each of them having an id and a name.

Tests are done with Jest and Spectator, and with Cypress.io.

If you have any suggestions to improve this skeleton, feel free to open an Issue or a Pull request :)

Advantages

• fully tested (ideally through a TDD approach)
• the front-end can be developed without APIs/back-end thanks to the in-memory service
• the code is divided by layer, one by concern
• the business logic is independent of the component, so it is easy to update the UI without impacting the business logic or to share it between a web app and a mobile app

Rationale

• domain files are agnostic (they do not depend on anything except rxjs) and gathered in one folder per topic in src/app/domain, including:
  • model.ts
  • usecase.ts (where the intents of the system are located)
  • state.ts (where the main business logic is located)
  • store.ts (where the data is located)
  • port.ts (just an interface for the services)
• the component interacts only with the use case class
• for the sake of simplicity, the use case class gathers the different use cases for that topic
• unit tests are performed only through the use cases (as they will use the necessary files to perform the required actions, so it is enough to assert their behavior)
• secondary adapters are in src/app/adapters
• integration tests are performed on the component and the HTTP service
• 2 secondary adapters are provided, the original one using HttpClient, and an in-memory one for mock (used by default, it can be changed in src/environments/environment.ts)

Development server

Run npm i to install dependencies.

Then ng serve --open for a dev server.

Running unit tests

Run npx jest to execute the unit tests

Running e2e tests

Run ng e2e to execute the end-to-end tests