Angular Basics : Présentation des modèles angulaires

Aujourd’hui, nous examinerons la syntaxe de base des modèles de composants angulaires afin de savoir comment créer des composants de base comportant des pièces mobiles.

Angular est un framework qui nous permet de créer des interfaces Web interactives pour les utilisateurs. Il s’agit d’un framework basé sur des composants qui nous permet de créer des applications frontales en composant des composants ensemble. Chaque composant a un fichier de modèle ou une chaîne, une classe de composant et un fichier de style.

Nous devons utiliser la syntaxe du modèle angulaire pour faire les choses dynamiquement dans les modèles. La syntaxe est mélangée avec du HTML normal pour rendre le contenu dynamique.

Il est livré avec quelques directives pour nous permettre de faire diverses choses comme le rendu conditionnel d’éléments et le rendu d’éléments à partir d’objets itérables.

Dans cet article, nous examinerons la syntaxe de base des modèles de composants angulaires afin de savoir comment créer des composants de base comportant des pièces mobiles.

Interpolation

L’une des choses les plus élémentaires que nous voulons faire dans nos composants angulaires est d’afficher les valeurs dans la classe du composant dans le modèle. Pour ce faire, nous utilisons la syntaxe d’interpolation.

Pour rendre les valeurs de la classe de composant, nous mettons le this propriété dans la classe du composant entre les accolades.

Dans le modèle, nous déposons le this partie. La variable sera supposée être une propriété de this dans l’instance de composant actuelle.

Par exemple, nous écrivons :

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

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  foo = 1;
  bar = "abc";
}

dans app.components.tsx pour ajouter deux variables d’instance dans AppComponentqui sont foo et bar.

Puis dans app.component.htmlnous écrivons:

<div>
  <p>{{ foo }}</p>
  <p>{{ bar }}</p>
</div>

rendre la valeur de foo et bar dans AppComponent dans le modèle.

Nous fixons templateUrl pour "./app.component.html"alors app.component.html dans le même dossier que app.components.tsx sera utilisé pour rendre la sortie du composant.

Les valeurs interpolées sont placées dans des balises HTML afin que les valeurs soient rendues sous forme de nœuds de texte dans les éléments HTML. Dans notre exemple, nous rendons les valeurs de foo et bar dans le p élément.

Le résultat rendu serait quelque chose comme:

<div _ngcontent-wti-c18="">
  <p _ngcontent-wti-c18="">1</p>
  <p _ngcontent-wti-c18="">abc</p>
</div>

Les attributs sont générés automatiquement par Angular.

En plus des variables, nous pouvons mettre des expressions JavaScript dans les accolades. Par exemple, nous écrivons :

app.component.tsx

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

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  a = 1;
  b = 2;
}

app.component.html

<div>
  <p>{{ a + b }}</p>
</div>

pour définir les variables d’instance a et b dans le AppComponent classe.

Puis dans app.component.htmlon a {{ a + b }} qui rend la somme de a et b. En conséquence, 3 est rendu.

Les syntaxes d’expression suivantes ne sont pas autorisées dans les modèles Angular :

• new
• ++ et --
• +=, -= et d’autres opérateurs JavaScript composés
• opérateurs au niveau du bit comme | et &

Déclarations de modèle

En plus de rendre les valeurs variables et les valeurs de retour des expressions avec interpolation, nous pouvons également ajouter des instructions de modèle dans nos modèles. Les instructions sont du code qui nous permet d’effectuer des actions telles que l’attribution de valeurs à des variables et l’exécution de méthodes dans des composants à partir du modèle.

Des exemples d’instructions incluent des appels de fonction qui sont déclenchés à partir d’événements et des éléments de rendu avec diverses directives intégrées.

Liaison d’événement

Nous pouvons également ajouter des instructions de modèle pour répondre à divers événements déclenchés par des éléments d’interface utilisateur dans le modèle.

Par exemple, nous pouvons appeler une méthode dans notre classe de composants lorsqu’un bouton est cliqué en écrivant :

app.component.tsx

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

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  sayHello() {
    console.log("hello world");
  }
}

app.component.html

<div>
  <button type="button" (click)="sayHello()">hello</button>
</div>

Dans AppComponenton ajoute le sayHello méthode qui enregistre 'hello world' dans la console. Et puis dans le app.component.html fichier de modèle, nous ajoutons un bouton qui appelle sayHello lorsque nous cliquons sur le bouton.

Appeler sayHello lorsque le bouton est cliqué, nous ajoutons :

(click)="sayHello()"

au bouton.

(click) écoute l’événement click lorsqu’il est émis par le bouton. L’événement click est émis lorsque l’on clique sur le bouton.

Et nous ajoutons ="sayHello()" après (click) appeler sayHello lorsque le bouton est cliqué.

Directives intégrées

Angular nous fournit quelques directives intégrées que nous pouvons utiliser dans nos modèles.

Nous pouvons utiliser le *ngFor directive pour afficher les éléments dans des tableaux à l’écran. Et le *ngIf La directive nous permet de rendre les valeurs de manière conditionnelle sur l’écran.

Pour utiliser le *ngFor directive pour rendre les éléments du tableau, nous définissons une variable d’instance de composant qui est assignée à un tableau. Ensuite, dans le modèle, nous utilisons le *ngFor pour restituer le tableau en le référençant, affectez l’élément en cours de rendu à la variable de boucle, puis utilisez la variable de boucle pour restituer l’élément.

Par exemple, nous écrivons :

app.component.tsx

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

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  members = [
    { name: "jane" },
    { name: "james" },
    { name: "joe" },
    { name: "john" },
    { name: "joey" },
  ];
}

pour définir le members tableau qui a cinq objets, chacun avec le name propriété à l’intérieur.

Puis nous écrivons :

app.component.html

<div>
  <p *ngFor="let member of members">{{ member.name }}</p>
</div>

rendre les valeurs de members en utilisant let member of members pour affecter l’élément dans members étant en boucle jusqu’à member.

Et puis on rend member.name pour rendre le name valeur de propriété de chaque élément.

Nous pouvons également utiliser le *ngIf directive pour rendre les éléments de manière conditionnelle. Le *ngIf La directive est appliquée à un élément ou à un composant pour le faire attacher au DOM uniquement si la valeur que nous lui attribuons est véridique.

Par exemple, nous écrivons :

app.component.ts

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

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  show: boolean = false;
}

pour définir le show variable d’instance booléenne dans AppComponent. Et nous fixons sa valeur initiale à false.

Puis dans le template, on écrit :

app.component.html

<div>
  <button (click)="show = !show">toggle</button>
  <p *ngIf="show">hello world</p>
</div>

pour ajouter un bouton qui bascule la valeur de show lorsque nous cliquons sur le bouton avec:

(click)="show = !show">

Puis nous ajoutons le *ngIf directive à la p élément et attribuez sa valeur à show de sorte que la p l’élément n’est ajouté au DOM et rendu que lorsque show est true.

Par conséquent, lorsque nous cliquons sur le bouton bascule, « hello world » s’active et se désactive.

Tuyaux

Nous pouvons utiliser des canaux pour transformer les valeurs renvoyées par les expressions de modèle en valeurs que nous voulons afficher. Ils prennent des données et nous retournons quelque chose dérivé des données.

Angular est livré avec quelques tuyaux intégrés. Ils incluent:

• DatePipe – formate une date en fonction des paramètres régionaux donnés
• UpperCasePipe – formate le texte en majuscule
• LowerCasePipe – formate le texte en minuscules
• CurrencyPipe – formate le texte dans une chaîne de devise en fonction des paramètres régionaux donnés
• DecimalPipe – formate le nombre dans une chaîne avec un point décimal selon les paramètres régionaux donnés
• PercentPipe – formate un nombre en une chaîne de pourcentage

Par exemple, nous pouvons les utiliser en écrivant :

app.component.ts

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

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  date: Date = new Date();
  str: string = "Foo";
  num: number = 123;
}

Nous ajoutons le date, str et num AppComponent variables d’instance que nous voulons formater avec les canaux de notre modèle.

Puis dans app.component.htmlnous écrivons:

<div>
  <p>{{ date | date }}</p>
  <p>{{ str | uppercase }}</p>
  <p>{{ str | lowercase }}</p>
  <p>{{ num | number }}</p>
  <p>{{ num | percent }}</p>
</div>

pour formater le date, str et num variables avec les tuyaux.

Pour utiliser les tuyaux, on ajoute le pipe nom après le « | » symbole. Il renvoie la valeur affichée à l’écran et laisse les variables telles quelles.

En conséquence, nous obtenons quelque chose comme:

Apr 20, 2022

FOO

foo

123

12,300%

affiché à l’écran.

Nous pouvons passer des arguments aux pipes s’ils les acceptent. Pour passer des arguments dans des tubes, nous ajoutons les arguments après le nom du tube et les deux-points.

Par exemple, nous écrivons :

app.component.tsx

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

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  date: Date = new Date();
}

app.component.html

<div>
  <p>{{ date | date: "MM/dd/yy" }}</p>
</div>

pour ajouter le date variable d’instance dans AppComponent.

Ensuite, nous rendons la valeur dans le modèle en utilisant le date tuyau avec le "MM/dd/yy" argument. La date rendue aura alors le format mois/jour/année au lieu du format par défaut.

Et nous obtenons quelque chose comme :

04/20/22

Liaison de propriété

Une autre fonctionnalité utile des modèles de composants angulaires est la possibilité de définir des attributs de manière dynamique. Pour ce faire, nous utilisons la fonctionnalité de liaison de propriété.

Angular est livré avec une syntaxe spéciale pour lier les propriétés aux valeurs du modèle. Nous mettons le nom de l’attribut entre crochets, puis le définissons sur une expression.

Par exemple, nous écrivons :

app.component.ts

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

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  itemImageUrl: string = "https://picsum.photos/200/300";
}

app.component.html

<div>
  <img alt="picture" [src]="itemImageUrl" />
</div>

pour définir le itemImageUrl variable d’instance de chaîne dans AppComponent.

Puis nous ajoutons le img élément dans notre modèle et définissez l’élément src attribut de la img élément à la valeur de itemImageUrl corde.

Depuis src est entourée de crochets, la valeur de itemImageUrl dans AppComponent sera utilisé comme valeur de src attribut de la img élément. Et l’image à l’URL est rendue.

Nous pouvons mettre des expressions JavaScript à la place d’une variable sur le côté droit de la liaison de propriété.

Par exemple, nous écrivons :

app.component.html

<div>
  <table>
    <tbody>
      <tr>
        <td [colSpan]="1 + 1" style="background-color: yellow;">2 cols</td>
      </tr>
      <tr>
        <td>1 col</td>
        <td>1 col</td>
      </tr>
    </tbody>
  </table>
</div>

pour ajouter un tableau avec un td qui s’étend sur deux colonnes avec :

<td [colSpan]="1 + 1" style="background-color: yellow;">2 cols</td>

Nous fixons [colSpan] pour 1 + 1 pour utiliser la valeur renvoyée de l’expression comme valeur de colSpan attribut de la td élément.

Liaisons d’attribut, de classe et de style

Les caractéristiques étroitement liées de la liaison de propriété sont les liaisons d’attribut, de classe et de style. Nous utilisons la liaison d’attribut pour lier à n’importe quel attribut.

Par exemple, nous pouvons réécrire l’exemple précédent en :

<div>
  <table>
    <tbody>
      <tr>
        <td [attr.colspan]="1 + 1" style="background-color: yellow">2 cols</td>
      </tr>
      <tr>
        <td>1 col</td>
        <td>1 col</td>
      </tr>
    </tbody>
  </table>
</div>

pour régler le colSpan attribut à la valeur de retour de 1 + 1.

Nous remplaçons colspan avec attr.colspan et ils font tous les deux la même chose.

Le rendu des styles dynamiques est quelque chose qui se fait couramment dans les modèles angulaires. Et nous pouvons le faire en définissant le class ou alors style attribuer dynamiquement.

Par exemple, nous écrivons :

app.component.ts

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

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  green: boolean = true;
}

app.component.html

<div>
  <button (click)="green = !green">toggle</button>
  <p [class.green]="green" [class.red]="!green">hello world</p>
</div>

app.component.css

.green {
  color: green;
}

.red {
  color: red;
}

pour ajouter le green variable booléenne. Et nous l’utilisons comme drapeau pour appliquer le green classe à la p élément si green est true. De même, nous appliquons la red classe à la p élément si le green variable est false.

Nous utilisons le bouton pour basculer le green variable entre true et false lorsque nous cliquons sur le bouton. Le app.component.css Le fichier contient les styles pour l’une ou l’autre des classes.

Nous pouvons réécrire l’exemple ci-dessus avec des liaisons de style. Pour ce faire, nous supprimons le code dans app.component.css. Ensuite, nous remplaçons le code dans app.component.html avec:

<div>
  <button (click)="green = !green">toggle</button>
  <p [style.color]="green ? 'green' : 'red'">hello world</p>
</div>

Et nous laissons le code dans app.component.ts comme si.

Nous fixons la valeur de color styliser dynamiquement avec :

[style.color]="green ? 'green' : 'red'"

Si green est truenous fixons le color propriété CSS de la p élément à 'green'. Sinon, nous le réglons sur 'red'.

Conclusion

Angular est un framework qui nous permet de créer des interfaces Web interactives pour les utilisateurs. La fonctionnalité principale du framework est la possibilité pour nous de composer des composants pour créer une application frontale.

Chaque composant a un fichier de modèle ou une chaîne, une classe de composant et un fichier de style.

Pour rendre le contenu de manière dynamique, nous utilisons du HTML standard en plus de la syntaxe spéciale fournie par Angular pour nous permettre de rendre les éléments de manière dynamique.

En outre, il est livré avec quelques directives pour nous permettre de faire diverses choses, comme le rendu conditionnel d’éléments et le rendu d’éléments à partir d’objets itérables.

Les canaux sont utiles pour formater les valeurs dans les modèles de manière immuable.