Hello world

Cette première leçon sert de point de départ : chaque leçon de ce tutoriel y ajoute de nouvelles fonctionnalités pour construire une application Angular complète. Dans cette leçon, nous allons modifier l'application pour qu'elle affiche le célèbre texte « Hello World ».

Ce que vous allez apprendre

Si votre application s'exécute correctement dans le navigateur et affiche le contenu sans erreur, cela confirme que votre environnement de développement et votre IDE sont correctement configurés pour commencer à créer une application Angular.

1. Télécharger l'application par défaut

   Commencez par cliquer sur l'icône « Download » dans le panneau en haut à droite de l'éditeur de code. Cela télécharge un fichier .zip contenant le code source de ce tutoriel. Ouvrez-le dans votre Terminal et votre IDE locaux, puis passez au test de l'application par défaut.

   À n'importe quelle étape du tutoriel, vous pouvez cliquer sur cette icône pour télécharger le code source de l'étape et repartir de là.

2. Tester l'application par défaut

   Dans cette étape, après avoir téléchargé l'application de départ, vous compilez l'application Angular par défaut. Cela confirme que votre environnement de développement dispose de ce qu'il faut pour poursuivre le tutoriel.

   Dans le panneau Terminal de votre IDE :

   1. Dans le répertoire de votre projet, allez dans le répertoire first-app.

   2. Exécutez cette commande pour installer les dépendances nécessaires à l'exécution de l'application.

      npm install

   3. Exécutez cette commande pour compiler et servir l'application par défaut.

      ng serve

      L'application doit se compiler sans erreur.

   4. Dans un navigateur web sur votre ordinateur de développement, ouvrez http://localhost:4200.

   5. Vérifiez que le site web par défaut s'affiche dans le navigateur.

   6. Vous pouvez laisser ng serve tourner pendant que vous réalisez les étapes suivantes.

3. Passer en revue les fichiers du projet

   Dans cette étape, vous découvrez les fichiers qui composent une application Angular par défaut.

   Dans le panneau Explorer de votre IDE :

   1. Dans le répertoire de votre projet, allez dans le répertoire first-app.
   2. Ouvrez le répertoire src pour voir ces fichiers.

      1. Dans l'explorateur de fichiers, trouvez les fichiers de l'application Angular (/src).

         1. index.html est le template HTML de plus haut niveau de l'application.
         2. styles.css est la feuille de style de plus haut niveau de l'application.
         3. main.ts est l'endroit où l'application démarre.
         4. favicon.ico est l'icône de l'application, comme sur n'importe quel site web.

      2. Dans l'explorateur de fichiers, trouvez les fichiers de composant de l'application Angular (/app).

         1. app.ts est le fichier source qui décrit le composant app-root. C'est le composant Angular de plus haut niveau de l'application. Un composant est la brique de base d'une application Angular. La description du composant comprend son code, son template HTML et ses styles, qui peuvent être décrits dans ce fichier ou dans des fichiers séparés.

            Dans cette application, les styles sont dans un fichier séparé, tandis que le code et le template HTML du composant sont dans ce fichier.

         2. app.css est la feuille de style de ce composant.

         3. Les nouveaux composants sont ajoutés dans ce répertoire.

      3. Dans l'explorateur de fichiers, trouvez le répertoire des images (/public), qui contient les images utilisées par l'application.

      4. Dans l'explorateur de fichiers, trouvez les fichiers et répertoires dont une application Angular a besoin pour se compiler et s'exécuter, mais avec lesquels vous n'interagissez normalement pas.

         1. .angular contient les fichiers nécessaires à la compilation de l'application Angular.
         2. .e2e contient les fichiers utilisés pour tester l'application.
         3. .node_modules contient les packages node.js utilisés par l'application.
         4. angular.json décrit l'application Angular aux outils de build.
         5. package.json est utilisé par npm (le node package manager) pour exécuter l'application finale.
         6. tsconfig.* sont les fichiers qui décrivent la configuration de l'application au compilateur TypeScript.

   Une fois que vous avez passé en revue les fichiers qui composent un projet d'application Angular, passez à l'étape suivante.

4. Créer Hello World

   Dans cette étape, vous modifiez les fichiers du projet Angular pour changer le contenu affiché.

   Dans votre IDE :

   1. Ouvrez first-app/src/index.html.

      Note : Cette étape et la suivante concernent uniquement votre environnement local !

   2. Dans index.html, remplacez l'élément <title> par ce code pour modifier le titre de l'application.

      Remplacer dans src/index.html

      <!doctype html>
      <html lang="en">
        <head>
          <meta charset="utf-8" />
          <title>Homes</title>
          <base href="/" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <link rel="icon" type="image/x-icon" href="favicon.ico" />
          <link
            href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap"
            rel="stylesheet"
          />
        </head>
        <body>
          <app-root></app-root>
        </body>
      </html>

      Enregistrez ensuite les modifications que vous venez d'apporter à index.html.

   3. Ouvrez ensuite first-app/src/app/app.ts.

   4. Dans app.ts, dans la définition @Component, remplacez la ligne template par ce code pour changer le texte du composant de l'application.

      Remplacer dans src/app/app.ts

      import {Component} from '@angular/core';
      
      @Component({
        selector: 'app-root',
        imports: [],
        template: ` <h1>Hello world!</h1> `,
        styleUrls: ['./app.css'],
      })
      export class App {
        title = 'homes';
      }

   5. Dans app.ts, dans la définition de la classe App, remplacez la ligne title par ce code pour changer le titre du composant.

      Remplacer dans src/app/app.ts

      import {Component} from '@angular/core';
      
      @Component({
        selector: 'app-root',
        imports: [],
        template: ` <h1>Hello world!</h1> `,
        styleUrls: ['./app.css'],
      })
      export class App {
        title = 'homes';
      }

      Enregistrez ensuite les modifications apportées à app.ts.

   6. Si vous avez arrêté la commande ng serve de l'étape 1, exécutez à nouveau ng serve dans la fenêtre Terminal de votre IDE.

   7. Ouvrez votre navigateur, allez sur localhost:4200 et vérifiez que l'application se compile sans erreur et affiche Homes dans le titre et Hello world dans le corps de votre application :

      

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