Créer le composant Home

Cette leçon du tutoriel montre comment créer un nouveau composant pour votre application Angular.

Ce que vous allez apprendre

Votre application dispose d'un nouveau composant : Home.

Aperçu conceptuel des composants Angular

Les applications Angular sont construites autour des composants, qui sont les briques de base d'Angular. Les composants contiennent le code, la mise en page HTML et les informations de style CSS qui assurent le fonctionnement et l'apparence d'un élément de l'application. Dans Angular, les composants peuvent contenir d'autres composants. Les fonctionnalités et l'apparence d'une application peuvent être réparties et découpées en composants.

Dans Angular, les composants ont des métadonnées qui définissent leurs propriétés. Lorsque vous créez votre Home, vous utilisez ces propriétés :

  • selector : pour décrire comment Angular fait référence au composant dans les templates.
  • imports : pour décrire les dépendances du composant.
  • template : pour décrire le balisage HTML et la mise en page du composant.
  • styleUrls : pour lister dans un tableau les URL des fichiers CSS utilisés par le composant.

  1. Créer le Home

    Dans cette étape, vous créez un nouveau composant pour votre application.

    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 créer un nouveau Home

      ng generate component home

    3. Exécutez cette commande pour compiler et servir votre application.

      Note : Cette étape concerne uniquement votre environnement local !

      ng serve

    4. Ouvrez un navigateur et allez sur http://localhost:4200 pour trouver l'application.

    5. Vérifiez que l'application se compile sans erreur.

      Utile : Le rendu doit être identique à celui de la leçon précédente car, même si vous avez ajouté un nouveau composant, vous ne l'avez encore inclus dans aucun template de l'application.

    6. Laissez ng serve tourner pendant que vous réalisez les étapes suivantes.

  2. Ajouter le nouveau composant à la mise en page de votre application

    Dans cette étape, vous ajoutez le nouveau composant, Home, au composant racine de votre application, App, afin qu'il s'affiche dans la mise en page de votre application.

    Dans le panneau Edit de votre IDE :

    1. Ouvrez app.ts dans l'éditeur.

    2. Dans app.ts, importez Home en ajoutant cette ligne aux imports du fichier.

      Importer Home dans src/app/app.ts

      import {Component} from '@angular/core';
import {Home} from './home/home';

@Component({
  selector: 'app-root',
  imports: [Home],
  template: `
    <main>
      <header class="brand-name">
        <img class="brand-logo" src="/public/logo.svg" alt="logo" aria-hidden="true" />
      </header>
      <section class="content">
        <app-home />
      </section>
    </main>
  `,
  styleUrls: ['./app.css'],
})
export class App {
  title = 'homes';
}

    3. Dans app.ts, dans @Component, mettez à jour la propriété tableau imports en y ajoutant Home.

      Remplacer dans src/app/app.ts

      import {Component} from '@angular/core';
import {Home} from './home/home';

@Component({
  selector: 'app-root',
  imports: [Home],
  template: `
    <main>
      <header class="brand-name">
        <img class="brand-logo" src="/public/logo.svg" alt="logo" aria-hidden="true" />
      </header>
      <section class="content">
        <app-home />
      </section>
    </main>
  `,
  styleUrls: ['./app.css'],
})
export class App {
  title = 'homes';
}

    4. Dans app.ts, dans @Component, mettez à jour la propriété template pour inclure le code HTML suivant.

      Remplacer dans src/app/app.ts

      import {Component} from '@angular/core';
import {Home} from './home/home';

@Component({
  selector: 'app-root',
  imports: [Home],
  template: `
    <main>
      <header class="brand-name">
        <img class="brand-logo" src="/public/logo.svg" alt="logo" aria-hidden="true" />
      </header>
      <section class="content">
        <app-home />
      </section>
    </main>
  `,
  styleUrls: ['./app.css'],
})
export class App {
  title = 'homes';
}

    5. Enregistrez vos modifications dans app.ts.

    6. Si ng serve tourne, l'application doit se mettre à jour. Si ng serve ne tourne pas, relancez-le. Le texte Hello world de votre application doit être remplacé par home works!, provenant de Home.

    7. Regardez l'application dans le navigateur et vérifiez qu'elle a bien été mise à jour.

    fenêtre de navigateur affichant une page avec le texte 'home works!'

  3. Ajouter des fonctionnalités à Home

    Dans cette étape, vous ajoutez des fonctionnalités à Home.

    À l'étape précédente, vous avez ajouté le Home par défaut au template de votre application, si bien que son HTML par défaut est apparu dans l'application. Dans cette étape, vous ajoutez un filtre de recherche et un bouton qui serviront dans une leçon ultérieure. Pour l'instant, c'est tout ce que contient Home. Notez que cette étape ajoute seulement les éléments de recherche à la mise en page, sans aucune fonctionnalité pour le moment.

    Si vous êtes parti d'un nouveau projet Angular au lieu de télécharger le projet de départ (ng new) : ajoutez ces styles globaux à src/styles.css pour que le bouton de recherche et la bordure du champ de saisie soient visibles :

    :root {
  --primary-color: #605dc8;
  --secondary-color: #8b89e6;
  --accent-color: #e8e7fa;
  --shadow-color: #e8e8e8;
}

button.primary {
  padding: 10px;
  border: solid 1px var(--primary-color);
  background: var(--primary-color);
  color: white;
  border-radius: 8px;
}

    Dans le panneau Edit de votre IDE :

    1. Dans le répertoire first-app, ouvrez home.ts dans l'éditeur.

    2. Dans home.ts, dans @Component, mettez à jour la propriété template avec ce code.

      Remplacer dans src/app/home/home.ts

      import {Component} from '@angular/core';

@Component({
  selector: 'app-home',
  template: `
    <section>
      <form>
        <input type="text" placeholder="Filter by city" />
        <button class="primary" type="button">Search</button>
      </form>
    </section>
  `,
  styleUrls: ['./home.css'],
})
export class Home {}

    3. Ouvrez ensuite home.css dans l'éditeur et remplacez son contenu par ces styles.

      Note : Dans le navigateur, ils peuvent être placés dans src/app/home/home.ts, dans le tableau styles.

      Remplacer dans src/app/home/home.css

      .results {
  display: grid;
  column-gap: 14px;
  row-gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(400px, 400px));
  margin-top: 50px;
  justify-content: space-around;
}

input[type="text"] {
  border: solid 1px var(--primary-color);
  padding: 10px;
  border-radius: 8px;
  margin-right: 4px;
  display: inline-block;
  width: 30%;
}

button {
  padding: 10px;
  border: solid 1px var(--primary-color);
  background: var(--primary-color);
  color: white;
  border-radius: 8px;
}

@media (min-width: 500px) and (max-width: 768px) {
  .results {
      grid-template-columns: repeat(2, 1fr);
  }
  input[type="text"] {
      width: 70%;
  }   
}

@media (max-width: 499px) {
  .results {
      grid-template-columns: 1fr;
  }    
}

    4. Vérifiez que l'application se compile sans erreur. Vous devez trouver le champ de filtre et le bouton dans votre application, avec leurs styles appliqués. Corrigez les éventuelles erreurs avant de passer à l'étape suivante.

    fenêtre de navigateur de homes-app affichant le logo, le champ de texte de filtre et le bouton de recherche

Résumé : Dans cette leçon, vous avez créé un nouveau composant pour votre application et lui avez ajouté un champ de filtre et un bouton.

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