Contrôler le flux de vos modèles

La puissante syntaxe de modèle d’Angular nous permet de manipuler facilement le DOM, de lier des données et de contrôler le flux de l’interface utilisateur de notre application. Dans cet article, nous nous concentrerons sur trois puissants blocs de flux de contrôle : @if, @for et @switch.

En plongeant dans le monde de Angulaire, l’une des premières choses que vous rencontrerez est la puissante syntaxe du modèle. Cette syntaxe vous permet de manipuler facilement le DOM, de lier des données et de contrôler le flux de l’interface utilisateur de votre application.

Dans cet article, nous allons nous concentrer sur trois blocs de flux de contrôle :@si, @pour et @changer.

Explorer le bloc @if

Imaginez que vous soyez chargé d’afficher du contenu de manière conditionnelle ; vous souhaitez que certains éléments n’apparaissent que si des critères spécifiques sont remplis. Entrer @siun bloc de contrôle qui inclut ou exclut dynamiquement le contenu du modèle en fonction de la véracité d’une condition donnée.

Considérez que vous créez une fonctionnalité qui accueille les utilisateurs par leur nom s’ils sont connectés. @ifvotre extrait de code pourrait ressembler à ceci :

@Component({
  template: `
    @if (user.isLoggedIn) {
      <div>Hello, {{ user.name }}! Great to see you again.</div>
    }
  `,
})
class WelcomeComponent {
  user = {
    isLoggedIn: true,
    name: 'John Doe',
  };
}

Dans l’exemple ci-dessus, le @if Le bloc est utilisé dans un composant angulaire pour afficher conditionnellement un message de bienvenue pour un utilisateur s’il est connecté. @if la directive vérifie la véracité des user.isLoggedIn propriété. Si trueAngular inclut dynamiquement le contenu HTML spécifié.

L’éclat de @if réside dans son approche simple : si la condition est évaluée à true, l’élément fait partie du DOM ; sinon, c’est comme si cela n’avait jamais existé. Mais qu’en est-il des situations dans lesquelles vous souhaitez proposer une alternative lorsque la condition échoue ? @if gère cela avec élégance avec un @else condition:

@Component({
  template: `
    @if (user.isLoggedIn) {
      <div>Hello, {{ user.name }}! Great to see you again.</div>
    } @else {
      <div>Welcome, guest. Please sign in.</div>
    }
  `,
})
class WelcomeComponent {
  user = {
    isLoggedIn: true,
    name: 'John Doe',
  };
}

Dans cet exemple ci-dessus, un @else Le bloc est introduit pour fournir un élément d’interface utilisateur alternatif dans les cas où le @if la condition échoue. Ici, si le user.isLoggedIn évalue à falsele modèle affiche un élément de contenu différent invitant l’utilisateur à se connecter.

Il existe également un @else if bloc qui permet des vérifications conditionnelles supplémentaires au sein de la même séquence, permettant des flux logiques plus complexes en fournissant des conditions intermédiaires avant d’atteindre la finale @else.

@Component({
  template: `
    @if (user.status === 'loggedIn') {
      <div>Hello, {{ user.name }}! Great to see you again.</div>
    } @else if (user.status === 'loggedOut') {
      <div>Welcome, guest. Please sign in.</div>
    } @else {
      <div>Could not determine user status. Please try reloading the page.</div>
    }
  `,
})
class UserStatusComponent {
  user = {
    status: 'loggedIn', 
    name: 'John Doe',
  };
}

L’utilisation de @if, @else if et @else dans le composant ci-dessus permet un rendu conditionnel plus nuancé basé sur le user.status propriété. Ce scénario illustre la gestion de plusieurs conditions dans un seul bloc de modèle, offrant une réponse d’interface utilisateur personnalisée pour chaque état possible du user.status.

En utilisant @if, @else if et @elseles développeurs peuvent créer des interfaces utilisateur plus attrayantes et plus réactives qui répondent à une variété d’états ou de conditions d’utilisateur, rendant l’application plus intuitive et conviviale.

Explorer le bloc @for

Le @pour block dans Angular introduit un moyen puissant de parcourir des collections et de restituer dynamiquement des listes d’éléments dans des modèles. Cela permet de simplifier le processus de création de structures répétitives basées sur un tableau ou les propriétés d’un objet, réduisant considérablement la quantité de code passe-partout et améliorant la lisibilité.

Imaginez que nous disposions d’un tableau d’éléments représentant les tâches que les utilisateurs doivent accomplir et que nous souhaitions afficher une liste montrant chaque tâche.

class TaskListComponent {
  tasks = [
    { name: 'Task 1', status: 'Pending' },
    { name: 'Task 2', status: 'Completed' },
    { name: 'Task 3', status: 'In Progress' },
  ];
}

Avec @fornous pouvons facilement mapper ce tableau et générer les éléments HTML correspondants pour chaque élément de la collection.

@Component({
  template: `
    <ul>
      @for (task of tasks; track task.id) {
        <li>{{ task.name }} - {{ task.status }}</li>
      }
    </ul>
  `,
})
class TaskListComponent {
  tasks = [
    { id: 1, name: 'Task 1', status: 'Pending' },
    { id: 2, name: 'Task 2', status: 'Completed' },
    { id: 3, name: 'Task 3', status: 'In Progress' },
  ];
}

Dans l’extrait ci-dessus, le @for le bloc parcourt le tasks tableau, création d’un élément de liste (<li>) pour chaque tâche. Le nom et le statut de chaque tâche sont insérés dynamiquement dans le modèle, ce qui maintient le modèle propre et ciblé tandis que le framework sous-jacent s’occupe de la logique de rendu.

Le track task.id déclaration dans le @for La directive est le moyen utilisé par Angular pour optimiser le processus de rendu en suivant chaque élément de la liste par son identifiant unique. Cette technique est particulièrement utile lorsqu’il s’agit de listes dynamiques dans lesquelles des éléments peuvent être ajoutés, supprimés ou réorganisés.

Le @for la directive peut être complétée par un @vide block, démontrant la capacité d’Angular à gérer des scénarios dans lesquels la collection sur laquelle itérer est vide.

@Component({
  template: `
    <ul>
      @for (task of tasks; track task.id) {
        <li>{{ task.name }} - {{ task.status }}</li>
      } @empty {
        <li>No tasks available</li>
      }
    </ul>
  `,
})
class TaskListComponent {
  tasks = []; 
}

Dans l’extrait ci-dessus, lorsque le tasks le tableau est vide, plutôt que de rendre un tableau vide <ul> élément ou nécessitant une logique conditionnelle supplémentaire en dehors de l’élément @for directive, la @empty Le bloc est automatiquement rendu. Il fournit un message clair et convivial (« Aucune tâche disponible ») directement dans le contexte de la liste prévue.

Explorer le bloc @switch

Le @changer block dans Angular apporte la puissance de la logique conditionnelle aux modèles, permettant une prise de décision complexe basée sur la valeur d’une expression. Semblable aux instructions switch dans de nombreux langages de programmation, @switch dans les modèles angulaires fournit un moyen d’exécuter l’un des nombreux blocs de code en fonction de la valeur d’une expression.

Considérons une application qui affiche différents messages en fonction des conditions météorologiques actuelles. Le @switch La déclaration peut gérer cela efficacement :

@Component({
  template: `
    @switch (weather.condition) {
      @case ("sunny") {
        <div>It's a bright sunny day!</div> 
      }
      @case ("rainy") {
        <div>Don't forget your umbrella. It's raining outside!</div> 
      }
      @case ("cloudy") {
        <div>The sky is covered with clouds today.</div>
      }
      @default {
        <div>Weather information not available.</div> 
      }
    }
  `,
})
class WeatherComponent {
  weather = {
    condition: 'sunny', 
  };
}

Dans l’extrait ci-dessus, le @switch la directive évalue weather.condition et restitue un bloc de HTML correspondant à la casse correspondante. Le @default case fournit une option de secours, garantissant que le modèle peut gérer correctement les valeurs inattendues.

Le @switch La directive est particulièrement utile pour les scénarios dans lesquels plusieurs conditions doivent être vérifiées par rapport à la même expression, car elle évite le besoin d’imbrications @if ou @else if directives.

Conclure

Dans cet article, nous avons approfondi la syntaxe des modèles Angular, en nous concentrant sur les puissants blocs de flux de contrôle : @if, @for et @switch. Ces blocs fournissent aux développeurs Angular les outils nécessaires pour créer des applications dynamiques et réactives qui s’adaptent aux données qu’elles présentent.

• Le @if bloc permet le rendu conditionnel des parties du modèle, ce qui facilite l’affichage ou le masquage des éléments en fonction de l’état de l’application.
• Le @for bloc rationalise le processus de rendu des listes et de gestion des collections dynamiques, permettant une itération efficace sur les tableaux et les objets.
• Le @switch bloc offre un moyen propre de gérer plusieurs conditions dans les modèles, réduisant ainsi la complexité et améliorant la lisibilité.

Chacun de ces blocs améliore la capacité du modèle Angular à gérer le contenu dynamique, à gérer les mises en page dépendantes de l’état et à présenter les données de manière organisée et efficace. En tirant parti @if, @for et @switchnous pouvons réduire considérablement le code passe-partout et augmenter la maintenabilité et l’évolutivité de nos applications.

Pour plus de détails sur les blocs de flux de contrôle intégrés d’Angular, assurez-vous de consulter le documentation officielle!