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.

 (almost always by humans but lately also by machines) 

 (by humans and ultimately executed by machines). Our goal is to write code that is easy to understand and change. Humans are not perfect, constant, or consistent, so we must establish rules when writing code. These rules are called 

The Angular team had done an excellent job providing us with their rules. 

 one worth reading in detail. But, for now, we will focus on a few essential and controversial (added by me) rules.

None of those Angular-specific rules are extraneous for a clean coder. In addition, we will follow a more generic Clean Style guide, emphasizing or changing the following:

Test the code you write. It is the only way to 

. Explaining or entering testing techniques in detail is beyond this lesson's scope. Don`t worry; 

 of the course. By now, I only want to stress its importance and recommend the following:

---
title: Code style guide
isPublicLesson: true
useMdx: false
---

# Code style guide.

### What you will learn in this lesson.

**Code is written** (almost always by humans but lately also by machines) **to be read** (by humans and ultimately executed by machines). Our goal is to write code that is easy to understand and change. Humans are not perfect, constant, or consistent, so we must establish rules when writing code. These rules are called **code style guides**.

## The Angular style guide.

The Angular team had done an excellent job providing us with their rules. **The Angular coding style guide** is the _official_ one worth reading in detail. But, for now, we will focus on a few essential and controversial (added by me) rules.

### Essential rules:

-   File name structure: `name-of-the-artifact.type.ts`. 
-   Single responsibility per file. 
-   Declaring name: `NameOfTheArtifactType`
-   Folder structure: _LIFT_ principle (Locate Identify Flat Try-DRY).

### Controversial rules:

-   Increase the use of sub-types for components: `my-component.form` or `my-component.list`.
-   Use the subtype in the component's selector: `prefix-my-component-form` or `prefix-my-component-list`.
-   Favor `inline` templates and styles. It may sound strange, but it will lead to smaller components. And that's worth it.
-   Avoid generic names for folders or libs: no more `core` or `shared`; prefer `state` or `logs` or be even more precise.
-   Favor flat folder structure.

## The Clean Code style guide.

None of those Angular-specific rules are extraneous for a clean coder. In addition, we will follow a more generic Clean Style guide, emphasizing or changing the following:

-   Write concise methods or functions (less than ten lines).
-   Write short, cohesive classes (less than a hundred lines).
-   All methods must have a verb in their name.
-   Go beyond Angular artifacts and use entities, DTOs, adapters, and other domain concepts.
-   Follow the SOLID principles.
-   Apply design patterns (facades, adaptors, factories, etc.) when suitable.

### Testing.

Test the code you write. It is the only way to **ensure that it works** as expected and that it will **still go well when refactoring**. Explaining or entering testing techniques in detail is beyond this lesson's scope. Don\`t worry; **testing will be part of every step** of the course. By now, I only want to stress its importance and recommend the following:

-   Use the AAA pattern (_Arrange, Act, Assert_) to organize each test's inners.
-   Use the _Given-When-Then_ pattern to describe what the test does.
-   Make tests RITE (_Readable, Independent, Thorough, and Explicit_).

## Tools to help you:

Writing clean code is a lot easier with the right tools well configured. And it's a chore that deserves your attention, as this quote says:

> "Give me six hours to chop down a tree, and I will spend the first four sharpening the axe." - Abraham Lincoln

### Prettier.

Think about yourself as a writer (of a book or story); your teammates or future self will be your readers. Take care of your code as you would for your novel writing. Prettier is **an opinionated tool that will format the code automatically**, making it consistent and easy to read.