The complete guide to designing, developing, testing, and deploying enterprise applications with Angular

Angular Applications Architecture

Requirements and FAQs

Code style guide

Introduction

Start from the domain

Software architecture for Front-end

Domain, design, develop

Workspaces scenarios

Applications and Libraries

Mono repository multi project

Domain boundary with plain TypeScript

Application details with Angular

Presentational details with Angular

Domain boundary and application details

Testing big Angular solutions with ease

Narrow tests for business logic

Visual tests for the presentation layer

Wide tests for the user experience

Testing since the beginning

Configuration environment and tokens

Instrumentation measuring and logging

Security authentication and authorization

Core generic infrastructure

A library for your shared UI vocabulary

A set of basic atomic elements

Some generic composed blocks

User interface, a design system foundation

Reactive stores with Signals

API access as a commodity

Interceptors for the dirty job

Data stores, reactive access, and persistence

Features come in routes to pages

Anatomy of a Page control flow and services

Different levels of state management

Routes and pages

In this course we teach you how to design, develop, ane deploy enterprise level Angular Applications the right way. Despite the fact that Angular is an opinionated framework, specially suited to build large solutions, it requires a deep knowledge to take decisions at every step.

In almost 30 lessons we cover how to choose and use the correct tools, how to structure an application that scales and how to code some intricate solutions to common problems. It's a long course/book and comes with a complete working codebase fully tested.

It is taught by Alberto Basalo who has been working, advising, and training multinational corporations, banks, and public administrations in Angular for years.

The complete guide to design, develop, test, and deploy enterprise applications with Angular

How to design, develop and deploy big enterprise applications with Angular.

Best practices to organize your code in small reusable libraries.

Application of reactive flow patterns for better user and developer speed.

Leverage the latest Angular version features like stand-alone components.

Common functionality for any application ready to use.

This is the first lesson specifically dedicated to Angular. We are between the domain basis and the user interface.

We will meet design patterns applied for building clean solutions. Follow this diagram as a road map to understand the application's structure and focus on the packages we will work on in this lesson.

 handles user interaction and manipulates the data. For the latter, we usually need several asynchronous commands and services. 

At the create-document subdomain, we strictly follow a clean architecture that forbids us to use framework-dependent tools (like RxJs) and forces us to implement methods taht return promises. So, we need to hide RxJs inside adapters.

Here is an excerpt of the one that persists in the document headers.

/**
 * Document Header Repository API Adapter
 * @description Adapts the DocumentHeaderRepository to the Domain Repository Port
 * @implements DocumentHeaderRepositoryPort
 * @see DocumentHeaderRepository
 */
@Injectable({ providedIn: 'root' })
export class DocumentHeaderRepositoryAdapter implements DocumentHeaderRepositoryPort {
  #repository = inject(DocumentHeaderRepository);

  async create(dto: DocumentHeaderDTO): Promise<DocumentHeaderDTO> {
    const observableRequest = this.#repository.post$(dto);
    const created = await lastValueFrom(observableRequest);
    return created;
  }
  // ...
}

In OOP, making a class implement an interface is an everyday chore. A concrete repository class would be easy if the input and output were identical. But, in our case, we need to adapt the 

. For this, we will use the adapter pattern.

 A structural design pattern that wraps or extends an existing class to be used as another interface. It decouples the domain interface (promises) from the application implementation (observables).

---
title: Application details with Angular
isPublicLesson: false
useMdx: true
---

# Application details with Angular

### What you will learn in this lesson.

This is the first lesson specifically dedicated to Angular. We are between the domain basis and the user interface.

We will meet design patterns applied for building clean solutions. Follow this diagram as a road map to understand the application's structure and focus on the packages we will work on in this lesson.

![The application for the createDocument use case](https://d2uusema5elisf.cloudfront.net/courses/angular-applications-architecture/module_04/lesson_04.02/public/create-document.application.png)

## Business logic layer.

A routed _smart component_ handles user interaction and manipulates the data. For the latter, we usually need several asynchronous commands and services. 

### Adapter services:

At the create-document subdomain, we strictly follow a clean architecture that forbids us to use framework-dependent tools (like RxJs) and forces us to implement methods taht return promises. So, we need to hide RxJs inside adapters.

Here is an excerpt of the one that persists in the document headers.

-   `DocumentRepositoryAdapter`

```typescript
/**
 * Document Header Repository API Adapter
 * @description Adapts the DocumentHeaderRepository to the Domain Repository Port
 * @implements DocumentHeaderRepositoryPort
 * @see DocumentHeaderRepository
 */
@Injectable({ providedIn: 'root' })
export class DocumentHeaderRepositoryAdapter implements DocumentHeaderRepositoryPort {
  #repository = inject(DocumentHeaderRepository);

  async create(dto: DocumentHeaderDTO): Promise<DocumentHeaderDTO> {
    const observableRequest = this.#repository.post$(dto);
    const created = await lastValueFrom(observableRequest);
    return created;
  }
  // ...
}
```

In OOP, making a class implement an interface is an everyday chore. A concrete repository class would be easy if the input and output were identical. But, in our case, we need to adapt the _domain promises to the RxJS observables_. For this, we will use the adapter pattern.

:::tip
**Adapter pattern.** A structural design pattern that wraps or extends an existing class to be used as another interface. It decouples the domain interface (promises) from the application implementation (observables).
:::

The **data access layer** (sometimes called the _infrastructure layer_) is the lowest level of the application. When you choose a framework, you are choosing a data access layer. In our case, we will use _Angular HttpClient_ to access the data.

Here, we face the most Angular-specific part of the application. The `DocumentHeaderRepository` is a wrapper around the Angular HttpClient. It provides methods to perform CRUD operations on a URL endpoint (_documents_, for this case).