C'est parti !

Objectifs de ce chapitre

✔️

Générez une application Angular

Découvrez comment utiliser la CLI Angular pour générer une application Angular.

✔️

Exécutez l'application

Lancez l’application localement et consultez la page de base par défaut.

✔️

Comprendre le rechargement à chaud

Comprenez comment fonctionne le rechargement à chaud dans les applications Angular.

Créez le projet

Angular fournit une interface de ligne de commande (CLI) pour générer une nouvelle application Angular, gérer le projet et exécuter l’application localement.

🎓 Instructions

Ouvrez un terminal et exécutez la commande suivante pour créer une application Angular :

npx -p @angular/cli@17.0.0 ng new angular-introduction-course --standalone=false --style=css --ssr=false --skip-tests=true

Ouvrez le projet

🎓Instructions

Ouvrez Visual Studio Code.
Cliquez sur le menu Fichier et sélectionnez Ouvrir un dossier.
Accédez au dossier practical-course et cliquez sur le bouton Sélectionner un dossier.

Exécutez l’application

La CLI Angular fournit une commande pour lancer l’application localement.

🎓 Instructions

Ouvrez le terminal de Visual Studio Code.
Tapez la commande suivante pour démarrer l’application :
Fenêtre de terminal
```
ng serve
```
Ouvrez votre navigateur et accédez à http://localhost:4200.
Vous devriez voir la page de base par défaut suivante :

Rechargement à chaud

Le rechargement à chaud est une fonctionnalité qui vous permet de voir les modifications que vous apportez à votre code sans avoir à actualiser manuellement la page.

🎓 Instructions

Ouvrez le fichier src/app/app.component.html.
Remplacez le contenu complet du fichier par le code suivant :
app.component.html
```
<header>
    <h1>Angular Practical course</h1>
</header>
```
Revenez à votre navigateur pour voir la page suivante :