Maintenant que tous les outils nécessaires, y compris Node.js, VS Code et Angular CLI, sont installés, il est temps de créer votre premier projet et de découvrir comment Angular CLI simplifie le processus de développement.

Qu'est-ce qu'Angular CLI ?

Il permet de :

• Créer rapidement de nouveaux projets avec une structure prédéfinie ;

• Générer des composants, des services et d'autres éléments du projet ;

• Démarrer un serveur de développement pour les tests et le débogage ;

• Construire l'application pour le déploiement en production.

Avec Angular CLI, il n'est pas nécessaire de configurer manuellement les fichiers et les dépendances—tout est configuré automatiquement.

Configuration de votre espace de travail

Avant de créer un nouveau projet, sélectionner un emplacement pratique sur l’ordinateur pour stocker les projets Angular.

En l'absence de dossier dédié aux projets, en créer un à l’aide de la commande suivante :

Cette commande crée un nouveau dossier nommé projects à l’emplacement spécifié.

Ensuite, accédez au dossier nouvellement créé en exécutant :

Cette commande ouvre le dossier projects, vous permettant d’y travailler.

Création d’un projet Angular avec CLI

Pour créer un nouveau projet Angular, exécutez la commande suivante dans votre dossier de projet :

• ng new - la commande pour créer un nouveau projet Angular ;

• angular-app - le nom du projet (vous pouvez utiliser n'importe quel nom de votre choix).

Après avoir exécuté la commande, Angular CLI vous posera quelques questions de configuration :

• Souhaitez-vous ajouter le routage Angular ? - ce sujet sera abordé plus tard, donc pour l'instant, sélectionnez Yes ;

• Quel format de feuille de style souhaitez-vous utiliser ? - cela détermine le type de feuilles de style pour votre projet. Il est recommandé de choisir CSS, mais vous pouvez sélectionner l'option qui vous convient le mieux.

Une fois ces options confirmées, Angular CLI commencera à installer les dépendances. Ce processus peut prendre quelques minutes car il télécharge et installe tous les paquets nécessaires.

Lorsque la configuration est terminée, un message de succès s'affichera, indiquant que le projet a été créé avec succès.

Vous pouvez maintenant ouvrir le projet dans VS Code, que nous avons installé précédemment.

Dans le prochain chapitre, vous examinerez en détail la structure des dossiers et des fichiers générée par Angular CLI afin de comprendre comment un projet Angular est organisé et où se trouvent les parties clés de votre application.