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.

🔥 To Do: Update to use the new control flow syntax

This lesson is specifically dedicated to Angular components. We are now at the roof of the building. So, be ready to leave the domain and soar over the field of Angular. 

Once more, we will meet design patterns applied for building clean solutions. Some concepts in this lesson will be further explained in the following chapters. So, don't worry if you don't understand everything at first. We will come back to it later.

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 outer of the application is the layer that the user interacts with.  At this altitude, we met with Angular to respond to routes displaying components.

Since Angular 13, we can subtype any component at the file name, class, or selector level. For a routed component, I like to subtype it asPage`; this way, I can quickly identify the smart components from the dumb presentationals.

 component, which is the entry point for the 

 use case. For convenience, I like to code in one single file but feel free to split the template into a separate file. Also, it is worth noting that any component will be standalone from now on, meaning we no longer use domains in this application.

@Component({
  selector: 'nwd-create-document',
  standalone: true,
  imports: [
    CommonModule,
    CreateDocumentForm,
    CommandContent,
    PageContent,
    RouterModule,
  ],
  template: `
    <nwd-page-content
      title="Create a new document"
      subtitle="Type the name and press to create"
    >
      <nwd-create-document-form (createDocument)="onCreateDocument($event)" />
      <nwd-command-content [state]="createDocumentStore.state" />
    </nwd-page-content>
  `,
  providers: [CreateDocumentStore],
})
export class CreateDocumentPage {
  /** A redux-like store focused on the execution of the CreateDocument Command */
  createDocumentStore = inject(CreateDocumentStore);
  /** Dependencies Angular Router */
  router = inject(Router);
  route = inject(ActivatedRoute);

  constructor() {
    // Register an effect to be executed when the document is created
    this.#registerAfterDocumentCreated();
  }

  /**
   * Method hooked to the CreateDocumentForm.createDocument event
   * @param title the title for the new document
   */
  onCreateDocument(title: string): void {
    this.createDocumentStore.createDocument(title);
  }
  /**
   * Reactive effect to be executed after the document is created
   * @description Navigates to the write-content page using the slug of the created document
   */
  #registerAfterDocumentCreated(): void {
    effect(() => {
      const state = this.createDocumentStore.state();
      if (state.status !== 'completed') return;
      const slug: string = state.result.header.slug;
      this.router.navigate(['write-content', slug], { relativeTo: this.route });
    });
  }
}

Don’t worry about the implementation of this component at this time. In future chapters, I will explain the state management and the presentational utilities involved. 

By now, focus only on grasping the main responsibility of a page component: be the data sheriff. Delegating the presentation to other components and depending on providers to retrieve and persist state.

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

# Presentational details with Angular

> 🔥 To Do: Update to use the new control flow syntax

### What you will learn in this lesson.

This lesson is specifically dedicated to Angular components. We are now at the roof of the building. So, be ready to leave the domain and soar over the field of Angular. 

Once more, we will meet design patterns applied for building clean solutions. Some concepts in this lesson will be further explained in the following chapters. So, don't worry if you don't understand everything at first. We will come back to it later.

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.03/public/create-document.application.png)

## Presentation layer.

The outer of the application is the layer that the user interacts with.  At this altitude, we met with Angular to respond to routes displaying components.

### Routes and pages:

Since Angular 13, we can subtype any component at the file name, class, or selector level. For a routed component, I like to subtype it as``Page\`; this way, I can quickly identify the smart components from the dumb presentationals.

For example, let´s start with the `CreateDocumentPage` component, which is the entry point for the `createDocument` use case. For convenience, I like to code in one single file but feel free to split the template into a separate file. Also, it is worth noting that any component will be standalone from now on, meaning we no longer use domains in this application.

-   `CreateDocumentPage`

```typescript
@Component({
  selector: 'nwd-create-document',
  standalone: true,
  imports: [
    CommonModule,
    CreateDocumentForm,
    CommandContent,
    PageContent,
    RouterModule,
  ],
  template: `
    <nwd-page-content
      title="Create a new document"
      subtitle="Type the name and press to create"
    >
      <nwd-create-document-form (createDocument)="onCreateDocument($event)" />
      <nwd-command-content [state]="createDocumentStore.state" />
    </nwd-page-content>
  `,
  providers: [CreateDocumentStore],
})
export class CreateDocumentPage {
  /** A redux-like store focused on the execution of the CreateDocument Command */
  createDocumentStore = inject(CreateDocumentStore);
  /** Dependencies Angular Router */
  router = inject(Router);
  route = inject(ActivatedRoute);

  constructor() {
    // Register an effect to be executed when the document is created
    this.#registerAfterDocumentCreated();
  }

  /**
   * Method hooked to the CreateDocumentForm.createDocument event
   * @param title the title for the new document
   */
  onCreateDocument(title: string): void {
    this.createDocumentStore.createDocument(title);
  }
  /**
   * Reactive effect to be executed after the document is created
   * @description Navigates to the write-content page using the slug of the created document
   */
  #registerAfterDocumentCreated(): void {
    effect(() => {
      const state = this.createDocumentStore.state();
      if (state.status !== 'completed') return;
      const slug: string = state.result.header.slug;
      this.router.navigate(['write-content', slug], { relativeTo: this.route });
    });
  }
}
```

Don’t worry about the implementation of this component at this time. In future chapters, I will explain the state management and the presentational utilities involved. 

By now, focus only on grasping the main responsibility of a page component: be the data sheriff. Delegating the presentation to other components and depending on providers to retrieve and persist state.

### Containers and presenters:

As stated earlier, we can subtype any component as we wish. The `CreateDocumentPage` component imports three other components of two different natures.

-   One Specific presenter, suffixed as `form`
-   Two Generic commodities suffixed as `content`

    But wait, what is content?  What is doing a form inside it? Okay, first, go back to the basics.