13. Annexes
13.1. Installation de Node.js
[Node.js] se télécharge sur nodejs.org : on choisit la version LTS (support à long terme) 24, ou la version 22 à partir de 22.22.3 : ce sont les versions qu'exige [Angular] 22. L'installateur [Windows] installe aussi [npm]. On vérifie l'installation dans une console :
Pour faire cohabiter plusieurs versions de [Node.js] sur une même machine, on peut utiliser [nvm-windows] (sous [Windows]) ou [nvm] (sous [Linux] et [macOS]).
Les exemples et l'étude de cas n'exigent d'installer aucun outil globalement : [Angular CLI] (la commande [ng]), le compilateur d'[Angular], [TypeScript] (et, pour le serveur, l'outil [nest]) font partie des dépendances de chaque projet, installées par [npm install]. Les scripts de [package.json] ([npm start], [npm run build]) les trouvent dans le dossier [node_modules]. Pour créer soi-même un nouveau projet, on peut utiliser [npx @angular/cli new mon-projet], sans rien installer.
13.2. Installation de Visual Studio Code
[Visual Studio Code] se télécharge sur code.visualstudio.com. Pour [Angular], on installe l'extension Angular Language Service (éditeur Angular), depuis le panneau des extensions (Ctrl-Maj-X) : complétion et vérification des types dans les templates, navigation d'un sélecteur ([<app-champ-saisie>]) vers la classe du composant, d'un [templateUrl] vers le fichier du template, signalement des erreurs du compilateur d'[Angular] au fil de la frappe.
On ouvre un projet par le menu Fichier / Ouvrir le dossier (le dossier [exemples-angular], par exemple), et l'on y ouvre une console par le menu Terminal / Nouveau terminal.
13.3. L'extension Angular DevTools
L'extension Angular DevTools s'installe depuis la boutique d'extensions de [Chrome], [Edge] ou [Firefox]. Elle ajoute un onglet « Angular » aux outils de développement du navigateur (F12), qui montre, pour une application lancée en mode développement :
- l'arbre des composants de la page, et, pour chacun, ses entrées, ses sorties et ses propriétés (les signaux et leur valeur) ;
- le graphe des signaux d'un composant : quel [computed] dépend de quel signal ;
- les services injectés, et l'arbre des injecteurs ;
- les routes du routeur ;
- un profileur, qui mesure le temps passé à mettre à jour chaque composant.
On peut y modifier une donnée et voir la page se mettre à jour : un excellent moyen de comprendre la réactivité.
13.4. Installation de MySQL avec Laragon
Le serveur JSON a besoin de [MySQL] (ou [MariaDB]). [Laragon] (laragon.org) en installe un sous [Windows], prêt à l'emploi, avec l'outil d'administration [HeidiSQL]. Après installation :
- le bouton « Démarrer tout » lance le serveur [MySQL], sur le port 3306 ;
- l'utilisateur [root] n'a pas de mot de passe : ce sont les valeurs par défaut du fichier [.env.example] du serveur ;
- dans [HeidiSQL] (bouton « Base de données »), le menu Fichier / Exécuter un fichier SQL exécute le script [database/dbrdvmedecins2.sql].
Sous [Linux] ou [macOS], on installe [MySQL] ou [MariaDB] avec le gestionnaire de paquets du système, et l'on exécute le script avec le client en ligne de commande : [mysql -u root -p < database/dbrdvmedecins2.sql].
13.5. Installation de curl
[curl] est livré avec [Windows] 10 et 11, [macOS] et la plupart des distributions [Linux]. On vérifie sa version :
L'option [--json], utilisée dans ce document, existe depuis la version 7.82 (2022). Avec une version plus ancienne, on remplace [--json @fichier] par [-H "Content-Type: application/json" -d @fichier], ou l'on installe une version récente depuis curl.se.
Sous [PowerShell], il faut taper [curl.exe] et non [curl] : dans [PowerShell], [curl] est un alias d'une autre commande ([Invoke-WebRequest]), qui ne comprend pas les options de [curl]. L'invite de commandes ([cmd]) n'a pas ce problème.