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, services et 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, choisissez un emplacement pratique sur votre ordinateur où vous souhaitez stocker vos projets Angular.

Si vous ne disposez pas d'un dossier dédié aux projets, créez-en un à l'aide de la commande suivante :

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

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

Cette commande ouvre le dossier projects, vous permettant de travailler à l'intérieur.

Création d’un projet Angular avec CLI

Pour créer un nouveau projet Angular, exécuter 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 proposera 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, un examen détaillé de la structure des dossiers et fichiers générée par Angular CLI permettra de comprendre comment un projet Angular est organisé et où se trouvent les parties clés de votre application.