5. Création et exécution de la première application Angular

Cette leçon détaille l'utilisation de l'Angular CLI pour générer et servir un nouveau projet.

1. Créer un nouveau projet

Utilisez la commande ng new, suivie du nom de votre projet. Nous appellerons le nôtre angular-course-app.

bash ng new angular-course-app

Le CLI vous posera deux questions :

1. Souhaitez-vous ajouter le routage Angular ? (Réponse : Yes, nous aborderons cela bientôt)
2. Quel format de feuille de style souhaitez-vous utiliser ? (Choisissez CSS par simplicité)

Le CLI créera le dossier du projet, configurera tous les fichiers nécessaires, installera les dépendances npm et paramètrera le projet.

2. Navigation et exécution de l'application

Déplacez-vous dans le répertoire nouvellement créé :

bash cd angular-course-app

Pour compiler l'application et lancer le serveur de développement, utilisez ng serve.

bash ng serve --open

• ng serve : Compile l'application et surveille les modifications.
• --open (-o) : Ouvre automatiquement l'application dans votre navigateur par défaut (généralement à l'adresse http://localhost:4200/).

3. Effectuer une modification simple

Ouvrez le projet dans votre éditeur de code. Naviguez vers src/app/app.component.ts et modifiez la propriété title :

typescript // app.component.ts export class AppComponent { title = 'Ma première application Angular !'; // Modifiez cette ligne }

Ouvrez src/app/app.component.html et modifiez le template pour afficher votre nouveau titre :

html

{{ title }}

Application démarrée avec succès !

Enregistrez les fichiers. La commande ng serve recompilera automatiquement les changements, et votre navigateur se rafraîchira (Hot Module Replacement), affichant le titre mis à jour.