1. Installer node, npm, Angular et VSCode

09/03/2025 - By 

Retourner à : Angular 18 pour débutants

0

Introduction

Nous allons démarrer aujourd’hui une série de cours qui vont vous permettre d’apprendre à utiliser Angular à travers un projet. A la base, je voulais à nouveau programmer une application de gestion de tâches, mais j’en ai marre de cet exemple académique, probablement certains d’entre vous aussi. Du coup, on se lance sur la création d’une application de visualisation et gestion de cartes à collectionner. Donc préparez vos cartes Pokémon, Magic, Yu-Gi-Oh! ou autres, car elles pourront vous inspirer pour ce cours.

Dans ce premier chapitre, nous allons voir comment installer nodeJS et Angular, puis à la fin, nous regarderons comment vérifier si notre installation fonctionne bien ou pas, et pour finir, on va installer VSCode en tant qu’éditeur de code. Afin de ne pas lancer de débats interminables entre Mac vs PC, je ferai l’installation sous Ubuntu et je vous laisserai des liens qui vous indiqueront comment installer le tout sous Mac ou PC.

Vocabulaire

Déjà commencons par un peu de vocabulaire. Le premier module qu’on va installer est Node.js (alias Node), qui est un environnement qui permet d’exécuter du Javascript. Nous allons aussi installer Npm (Node package manager) qui permet d’installer et gérer des librairies javascript. Ensuite, on va installer Angular qui est un framework qui permet de créer des applications web en TypeScript. Pour finir, TypeScript est un langage de programmation qui est un sur-ensemble de JavaScript, ce qui veut dire que toutes les commandes JavaScript que vous connaissez fonctionnent en TypeScript, mais non pas inversement. A noter que TypeScript doit être transcompilé en JavaScript pour pouvoir être interprété par les navigateurs.

Installer Npm et Node

Maintenant qu’on a posé les bases, il est temps d’ouvrir un nouveau terminal. Avant de pouvoir installer Node, on va avoir besoin de Curl, qui nous permettra de télécharger des fichiers via la ligne de commande. Donc si ce n’est pas déjà fait, installons Curl. Pour cela, on tape les lignes suivantes dans le terminal:

Bash
sudo apt update
sudo apt install curl

Une fois Curl installé, on va télécharger et installer Nvm (Node Version Manager) qui permet d’installer Node et de passer d’une version de Node à une autre très facilement:

Bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
source ~/.bashrc
nvm install --lts

La ligne nvm install –lts va installer la dernière version LTS de Node et la version correspondante de Npm, qui est le gestionnaire de paquets de node. Pour vérifier la version précise qui a été installée, vous pouvez taper “node –version” dans le terminal. Au moment où j’écris ce post, la version installée est la version 20.11.1:

node version

Vérifions maintenant que Npm est également bien installé en tapant “npm –version” dans le terminal:

npm version

Maintenant, je propose qu’on vérifie que tout fonctionne comme prévu. Pour cela, on va créer un petit fichier javascript qu’on va exécuter avec node. Commençons par un simple Hello World ! Là, je vous conseille de prendre un éditeur de texte quelconque. Dans mon cas, je vais utiliser Nano en ligne de commande, mais libre à vous de prendre autre chose.

Si vous souhaitez utiliser Nano et qu’il n’est pas encore installé il suffit de faire:

Bash
sudo apt update
sudo apt install nano

Puis, pour créer notre fichier hello.js, on fait:

Bash
nano hello.js

Cette commande va ouvrir l’éditeur Nano, et là on va taper le code de notre Hello World:

hello.js
console.log("Hello World!");

Pour quitter et sauvegarder le fichier, on tape Ctrl + X. Ensuite Nano nous demande si on veut sauvegarder le fichier, on tape “Y”:

node hello world

Là, Nano nous demande de valider le nom du fichier, et il suffit de taper “Entrer” pour sauvegarder et quitter Nano.

nano save

Maintenant il suffit de taper “node hello.js” dans le terminal. Et là, comme vous pouvez le constater, il y a bien la phrase “Hello world” qui s’affiche dans le terminal.

execute node

Avec Node, on peut aussi faire tourner des serveurs en local. Pour illustrer cela, je vous propose d’ouvrir à nouveau le fichier hello.js (par exemple, en tapant à nouveau nano hello.js), et de remplacer le code du fichier par:

hello.js
const http = require('http');
http.createServer((req, res) => {
	res.writeHead(200, {'Content-Type': 'text/plain'});
	res.end('Hello World!');
}).listen(3000, 'localhost');

En bref, on vient de créer un serveur qui tourne à l’adresse http://localhost:3000 et qui retourne un code 200 ainsi que le texte “Hello world!”. Et donc si vous lancez le code avec

Bash
node hello.js

et que vous ouvrez l’adresse http://localhost:3000 dans votre navigateur, vous voyez bien le message hello world affiché à l’écran:

hello world chrome

Installation d’Angular

Maintenant qu’on a vérifé que node fonctionne bien, nous pouvons installer Angular en tapant la ligne suivante dans le terminal:

Bash
npm install -g @angular/cli

Une fois l’installation terminée, vous pouvez vérifier que tout soit bien installé en tapant:

Bash
ng version

La première fois que vous taperez une commande Angular, vous verrez la question suivante:

ng version first

Si vous souhaitez activer l’auto-complétion des commandes Angular dans le terminal, il suffit de taper “Y”. Ensuite, Angular vous demandera si vous voulez partager des données pseudonymisées avec Google.

ng version second

Ici aussi, libre à vous de choisir ce que vous préférez, et il suffit de taper “n” pour non ou “Y” si vous souhaitez partager des données, et une fois que vous aurez répondu à ces questions, vous verrez votre version d’Angular affichée à l’écran:

Et voilà, nous avons maintenant une version d’Angular installée et prête à être utilisée. Dans le prochain chapitre, nous verrons comment créer un premier projet Angular.

Installation de l’IDE (VSCode)

Un IDE, c’est quoi ?

Avant d’installer VSCode, regardons ce qu’est un IDE. IDE est l’acronyme de Integrated Development Environment, ce qui veut dire Environnement de Développement Intégré. Contrairement à un éditeur de texte simple, un IDE vient avec un large éventail d’outils dédiés au développement de logiciels. Parmi ces outils, on retrouve :

  • Un éditeur de code
  • Un gestionnaire de projets
  • Des outils pour exécuter les programmes
  • Des outils de débogage
  • …

Il existe une multitude d’IDEs, certains gratuits et d’autres payants, comme par exemple :

Dans ce cours, nous utiliserons VSCode et vous verrez peut-être ici et là des captures d’écrans des IDE JetBrains, mais vous pouvez utiliser votre IDE préféré pour suivre ce cours.

Installer VSCode

Pour installer VSCode, il suffit de le télécharger à l’adresse suivante :

https://code.visualstudio.com/Download

Sur cette page, il vous suffit de choisir la version qui correspond à votre système d’exploitation, de la télécharger et puis de l’installer.

Quiz

Répondez au quiz ci-dessous afin de vérifier que vous avez bien compris le contenu de cette leçon. Les quiz sont uniquement disponibles pour les abonnés Standard et Premium.

Laisser un commentaire