Angular - 1.4.2 Créer votre première application Angular

Une fois Angular CLI installé, vous pouvez créer votre premier projet. La commande ng new génère un dossier complet, avec toutes les dépendances et la configuration de compilation. Cette leçon montre comment créer le projet, le lancer en local et l'afficher dans le navigateur.

Choisir le dossier de travail

Ouvrez le terminal et placez-vous dans le dossier où vous voulez créer le projet, avec la commande cd. Choisissez un dossier où vous avez les droits de lecture et d'écriture.

cd <chemin-du-dossier>

Créer le projet avec ng new

La commande ng new crée un nouveau dossier portant le nom du projet, dans le dossier où vous la lancez. Le nom ne doit pas contenir d'espace, ni le mot test. Pour commencer, le mode strict n'est pas activé. Le routage n'est pas ajouté pour l'instant, et le CSS standard est retenu comme format de feuilles de style.

Angular utilise TypeScript, qui doit être compilé en JavaScript avant d'être exécuté par le navigateur. Cette configuration plus complexe, avec toutes ses dépendances, est donc normale.

ng new ma-app

Lancer le serveur de développement

Placez-vous dans le dossier du projet, puis lancez le serveur de développement. Par défaut, le serveur écoute sur le port 4200. Ouvrez votre navigateur à l'adresse localhost:4200 pour voir l'écran de démarrage fourni par Angular CLI.

Pour suivre le cours, remplacez le contenu du fichier HTML du composant racine, situé dans le dossier src/app, par le fichier fourni avec la leçon. Il suffit ensuite de recharger la page, sans redémarrer le serveur.

cd ma-app
ng serve

En résumé

La commande ng new crée le projet, et ng serve le lance en local. Le serveur de développement est accessible sur localhost:4200. Vous voyez alors l'écran de démarrage d'Angular, point de départ de vos modifications.

Points clés

  • ng new crée un projet Angular complet avec sa configuration.
  • Le nom du projet ne doit pas contenir d'espace ni le mot test.
  • ng serve lance un serveur de développement sur le port 4200 par défaut.
  • Le rechargement de la page suffit pour voir vos modifications.
  • Le mode strict et le routage sont désactivés pour commencer.

Questions fréquentes

Pourquoi ne pas ajouter le routage tout de suite ?

Le routage sera étudié plus tard dans le cours. Pour commencer, il n'est pas nécessaire.

Faut-il redémarrer le serveur après une modification ?

Non, il suffit de recharger la page dans le navigateur pour voir le changement.

Que voit-on à l'adresse localhost:4200 ?

Un écran de démarrage fourni par Angular CLI, avec des liens vers les documents officiels.