Créer votre première application Angular

Ce tutoriel se compose de leçons qui présentent les concepts Angular à connaître pour commencer à coder avec Angular.

Vous pouvez en suivre autant que vous le souhaitez, et dans l'ordre de votre choix.

Utile : Vous préférez la vidéo ? Nous proposons aussi un cours YouTube complet pour ce tutoriel !

Avant de commencer

Pour tirer le meilleur parti de ce tutoriel, passez en revue ces prérequis afin de vous assurer de disposer de tout ce qu'il vous faut pour réussir.

Votre expérience

Les leçons de ce tutoriel supposent que vous avez déjà :

  1. Créé une page web HTML en modifiant directement le HTML.
  2. Programmé le contenu d'un site web en JavaScript.
  3. Lu du contenu CSS (Cascading Style Sheets) et compris comment les sélecteurs sont utilisés.
  4. Utilisé des instructions en ligne de commande pour effectuer des tâches sur votre ordinateur.

Votre équipement

Ces leçons peuvent être suivies avec une installation locale des outils Angular ou dans notre éditeur intégré. Le développement Angular en local est possible sous Windows, macOS ou Linux.

Note : Repérez les alertes comme celle-ci, qui signalent les étapes susceptibles de ne concerner que votre éditeur local.

Aperçu conceptuel de votre première application Angular

Les leçons de ce tutoriel créent une application Angular qui liste des logements à louer et affiche le détail de chaque logement. Cette application utilise des fonctionnalités communes à de nombreuses applications Angular.

Rendu de la page d'accueil de l'application homes

Environnement de développement local

Note : Cette étape concerne uniquement votre environnement local !

Effectuez ces étapes dans un outil en ligne de commande sur l'ordinateur que vous souhaitez utiliser pour ce tutoriel.

  1. Identifier la version de node.js requise par Angular

    Angular nécessite une version LTS active ou LTS de maintenance de Node. Vérifions votre version de node.js. Pour en savoir plus sur les versions requises, consultez la propriété engines dans le fichier package.json.

    Depuis une fenêtre de Terminal :

    1. Exécutez la commande suivante : node --version
    2. Vérifiez que le numéro de version affiché répond aux exigences.

  2. Installer la bonne version de node.js pour Angular

    Si aucune version de node.js n'est installée, suivez les instructions d'installation sur nodejs.org

  3. Installer la dernière version d'Angular

    Une fois node.js et npm installés, l'étape suivante consiste à installer l'Angular CLI, qui fournit les outils pour développer efficacement avec Angular.

    Depuis une fenêtre de Terminal, exécutez la commande suivante : npm install -g @angular/cli.

  4. Installer un environnement de développement intégré (IDE)

    Vous êtes libre d'utiliser l'outil de votre choix pour créer des applications avec Angular. Nous recommandons les suivants :

    1. Visual Studio Code
    2. Étape facultative mais recommandée : vous pouvez améliorer encore votre expérience de développement en installant l'Angular Language Service
    3. WebStorm

  5. Facultatif : configurer votre IDE assisté par IA

    Si vous suivez ce tutoriel dans votre IDE assisté par IA préféré, consultez les règles de prompt et les bonnes pratiques Angular.

Pour en savoir plus sur les sujets abordés dans cette leçon, consultez :