1. Introduction

The document’s PDF is |HERE|.

The document’s codes are |HERE|.

This document is a product of Anthropic’s IA Claude. Its purpose is to transpose the document [Un exemple de client / serveur - AngularJS 1.x / Spring 4 ] in two ways:

• the client AngularJS 1.x is replaced by a client [Angular] 22;
• the Java Spring web framework MVC is replaced by the web framework NestJS;

Claude from Anthropic (IA) did most of the work (90%):

• code generation: Claude generated all of the code. I simply tested it by following the generated course
• Course generation in ODT format: Claude generated several versions at my request. This is where I was primarily involved.

Note: Upon reading the course generated by Claude’s IA, I realized there were many concepts to understand. If the reader’s primary goal is to “learn NestJS,” a simpler example is available in the [Introduction to the TypeScript language and the NestJS web framework through examples (2026)] document. The reader can then return to this document to understand the Angular client-side framework.

Serge Tahé, September 2026

==

This document is a follow-up to the course “A Client/Server Example—AngularJS 1.x / Spring 4,” written in 2014. That original document built a small medical appointment scheduling application (“[RdvMedecins]”) using a Spring 4 / Spring Data / Spring MVC server and a AngularJS 1.x client.

Twelve years later, the two frameworks used have evolved significantly—or have even been replaced in common use:

• on the server side, [NestJS] has established itself as one of the most widely used Node.js/TypeScript frameworks most widely used for building structured web applications, with a philosophy similar to that of Spring (modules, controllers, services, dependency injection) but within the JavaScript/TypeScript ecosystem;
• On the client side, AngularJS 1.x was completely rewritten starting in 2016 under the name [Angular] (2, 4, 5… up to version 22 used in this document), with a component-based architecture, and more recently, a signal-based responsiveness system that replaces the monitoring mechanism ($watch) of AngularJS 1.x.

The goal of this document is to revisit the original case study—the same application, the same features, the same database—and rebuild it using current tools, while maintaining as much of the same instructional progression as the 2014 document as possible.

1.1. A Step-by-Step Reconstruction

The original document was approximately 300 pages long and covered, in addition to the application’s core functionality—role-based authentication (Spring Security)—twelve progressive examples for learning AngularJS and 1.x step by step. Reconstructing all of this content at once would be both time-consuming and difficult to digest.

This document therefore covers the first two steps of the reconstruction:

• the application’s general architecture (unchanged in principle);
• the database (unchanged, except for the addition of the [users] table);
• the complete [NestJS] server, with all features for viewing and booking/canceling appointments;
• token-based authentication (JWT) and role-based access control (ADMIN/USER), equivalent to the Spring Security layer in the original document;
• the corresponding [Angular] client, with the same features, a login screen, a Bootstrap interface tailored to the logged-in user’s role, and the ability to switch the interface between French and English ([@ngx-translate/core]).

Two features of the original document are, at this stage, excluded from this document: the original client’s “debug” mode (display of the raw template of the current view), which has been deliberately omitted from this port (see Chapter 6 for the rationale behind this decision), and the configuration of an artificial network delay, which has been deferred to a later stage.

1.2. Who This Document Is For

This document assumes no prior knowledge of either [NestJS] or Angular. Each new concept (decorator, dependency injection, component, signal, etc.) is explained as it appears, in as much detail as possible—including for readers who have never written a single line of TypeScript.

However, some basic knowledge is helpful for getting the most out of this document:

• a basic understanding of the JavaScript language (variables, functions, arrays, objects);
• a basic understanding of HTTP interactions in a web application (GET/POST methods, JSON format);
• common tags in the HTML language;
• using the command line (cd, npm install…).

You do not need to be familiar with the TypeScript language (used on both the server and client sides) beforehand: it is a superset of JavaScript that adds a type system, which is explained throughout the document whenever it is used. Interested readers may consult the [Introduction au langage TypeScript et au framework NestJS (2026)] document, which explains TypeScript in detail.

1.3. The Application Architecture

The general architecture of the application has not changed since the original document:

• a web server delivers a single HTML/CSS/JS, containing a [Angular] application built on the Component model (view + associated logic), which relies on services to communicate with the server;
• the user interacts with the views displayed in the browser. The user’s actions sometimes require a request to the server [NestJS], which processes the request and returns a response JSON (JavaScript Object Notation); this response is used to update the view presented to the user.

The application under consideration will have the following architecture:

• In [1], the user of the [Angular] application queries the [présentation] and [2] layers of that application;
• to perform the action requested by the user, the [présentation] [2] layer may query the [Services] [3] layer;
• To provide the requested service, the [3] layer may need to query [4], the remote server JSON implemented by [NestJS];
• Depending on the request received in [5], the [6-8] layers may be queried;
• the server’s response returns the [2-8] layers in reverse order;
• the view displayed to the user, [1], reflects this response;

Note: If you’re confused by the project’s architecture, refer back to this diagram. Note that SGBD is processed by the server, not by the client.

1.4. Tools Used

This document uses the following tools (their installation is detailed in Chapter 2):

• Node.js (version 22 or later) and its package manager npm—the equivalent, within the JavaScript ecosystem, of what Java + Maven were for the original Spring server;
• Visual Studio Code, a free code editor, with its TypeScript extensions—the equivalent of Spring Tool Suite (STS) and WebStorm used in the original document;
• [NestJS], CLI ([@nestjs/cli]), and [Angular], CLI ([@angular/cli]), two command-line tools that generate the project structure and start the development servers;
• [MySQL] 8 for the database (the original document used [MySQL] 5—the relational schema itself remains unchanged);
• Postman (or any other HTTP client), to test the server’s URL responses to POST requests (/ajouterRv, /supprimerRv)—a browser can only test GET requests.

1.5. Application Features

The “business” features of the [RdvMedecins] application remain unchanged from the original document; access control, however, is slightly more robust than in the original (see the table below):

• A medical practice employs several doctors, each with their own consultation time slots;
• a user must log in (username/password) to access the application;
• Once logged in, the user can select a doctor and a day, and view the doctor’s schedule for that day: each time slot appears either available or booked;
• a user with the role ADMIN can also book an available time slot for a patient of their choice and cancel an existing appointment;
• A user with the role USER can view the schedules but cannot book or cancel (read-only access)—a deliberate difference from the original document, where the role USER was used solely to illustrate a denial of access and could not view anything at all (see Chapter 3, “Authentication” section, for the rationale behind this choice).

1.6. What Has Changed, What Has Not

	Original document (2014)	This document (2026)
Base de données	[MySQL] 5, tables MEDECINS/CLIENTS/CRENEAUX/RV	[MySQL] 8, same tables, same columns, same constraints
Serveur	Java, Spring 4, Spring Data (JPA/Hibernate), Spring MVC	TypeScript, [NestJS], [TypeORM], same as URL
Client	JavaScript, AngularJS 1.x, Bower	TypeScript, [Angular] 22 (standalone components, signals), npm
Style CSS	Bootstrap 3	Bootstrap 5
Authentification	Spring Security, HTTP Basic, roles in 3 tables; only ADMIN uses the application	Passport/JWT ([@nestjs/passport], [@nestjs/jwt]), a signed token presented with each request, roles in a single column, ADMIN full access, and USER read-only
Internationalisation FR/EN	angular-translate library	[@ngx-translate/core] + [@ngx-translate/http-loader]

1.7. Organization of this document

1. Setting up the development environment—installing the tools, creating the database, and launching the server and client for the first time.

2. Introduction to [NestJS]—the basics of the framework (modules, controllers, providers), with a mini-project to get started.
3. The [NestJS] server for the [RdvMedecins] application—the database, [TypeORM] entities, the DAO layer, the business layer, the web layer, and JWT token-based authentication and roles.
4. Introduction to [Angular]—the basics of the current framework (components, signals, services, and HTTP communication).
5. The [Angular] client for the [RdvMedecins] application—client architecture, each of its components (including the login screen), the Bootstrap interface, switching between French and English in the interface, and a step-by-step walkthrough of the entire application.
6. Conclusion and next steps.