Angular - 3-3 Création d'une application

Place à la création concrète de notre nouveau projet Angular. Ouvrez Visual Studio Code. Avant de générer l'application, je crée un dossier project-angular destiné à regrouper tous les projets du cours — l'emplacement n'a pas d'importance, je le mets sur le bureau. On peut aussi le créer en ligne de commande avec mkdir. On navigue ensuite vers ce dossier dans le terminal : 

cd ~/Desktop/project-angular

La commande ng new

Une fois dans le dossier, on lance la commande qui crée l'application. Comme déjà vu : ng new (ou ng n). Il faut donner un nom : ici, pour rester dans le thème recettes/liste de courses, j'opte pour ng-cuisine-app. J'ajoute aussi l'option --strict. Sans elle, on rencontre plus tard des problèmes ; le mot le dit, ce mode active une vérification de type plus stricte, améliore la maintenabilité et détecte les bugs en amont. 

ng new ng-cuisine-app --strict

Le CLI pose ensuite deux questions :

  • voulez-vous ajouter du routing ? Je réponds n — nous n'en avons pas encore besoin ;
  • quel format de feuilles de style ? Je choisis CSS.

Le CLI génère le projet et installe tous les packages nécessaires. Une fois terminé, un ls liste le contenu du dossier project-angular : on y voit notre nouvelle application. Je tape cd ng-cuisine-app pour entrer dedans, puis j'ouvre le projet dans VS Code, soit via Fichier → Ouvrir le dossier, soit en tapant directement dans le terminal code . qui ouvre une nouvelle fenêtre VS Code sur le dossier courant. Dans la prochaine vidéo, nous commencerons à pratiquer.

En résumé

Cette leçon présente le processus complet de création d'une nouvelle application Angular. Vous apprendrez à organiser votre espace de travail, utiliser la commande `ng new` avec l'option `--strict` pour garantir une meilleure maintenabilité et une détection précoce des bugs, et finaliser le projet en l'ouvrant dans Visual Studio Code pour commencer à pratiquer.

Points clés

  • Créer un dossier dédié (project-angular) pour centraliser tous les projets du cours Angular
  • Utiliser la commande 'ng new' suivi du nom du projet pour générer une nouvelle application
  • L'option '--strict' active une vérification de type plus stricte et améliore la maintenabilité du projet
  • Le CLI Angular propose de configurer le routing et le format CSS (CSS par défaut, routing optionnel)
  • Naviguer avec 'cd' vers le répertoire du projet et l'ouvrir dans VS Code avec la commande 'code .'

Questions fréquentes

Pourquoi ajouter l'option '--strict' lors de la création d'une application Angular ?

Cette option crée un espace de travail avec une vérification de type plus stricte, améliore la maintenabilité du code et permet de détecter les bugs plus tôt dans le développement du projet.

Est-il obligatoire de configurer le routing lors de la création du projet ?

Non, le routing n'est pas obligatoire. Si vous n'en avez pas besoin immédiatement, vous pouvez répondre 'non' à la question du CLI et l'ajouter ultérieurement.

Comment ouvrir le dossier du projet dans VS Code après sa création ?

Une fois dans le répertoire du projet (après exécution de 'cd' suivi du nom du dossier), tapez la commande 'code .' pour ouvrir le dossier dans Visual Studio Code.