Angular pas à pas
1. La liaison de données (Data binding)
On cherche à afficher les données à l’utilisateur et de les collecter aussi de lui. Nous faisons ca par la liaison des contrôles dans les Template html avec les propriétés de données de la composante de la classe.
En plus on peut ajouter de la logique au Template en utilisant les directives qui informe angular sur comment il modifie la page.
Dans ce démo on va créer un composant de liste des produits. On va afficher la liste des désignations et nous affichons un message sous certains conditions.
2. Affichage des propriétés du composant avec interpolation
La manière la plus facile est de lier le nom de la prop(i.e., propriété) en utilisant l’interpolation.
Interpolation permet d’incorporer
des chaines calculées dans le texte
entre les balises HTML et avec
les valeurs affectées aux attributs. L’interpolation utilise le double curly braces, {{ and }}.
Avec l’interpolation on met le nom de la prop dans le Template et on la délimite
par {{ et }}. Par exemple {{désignation}}.
Exemple
· Créer un projet tp2.
· Modifier le fichier de composant pour qu’il ressemble à ca
|
import { Component } from '@angular/core';
@Component({ selector: 'app-root', template: '<h1>{{title}}</h1><h2>le meuilleur produit est: {{designation}}</h2>', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'gestion de produit'; designation = 'samsumg'; }
|
Angular lit automatiquement les valeurs des prop et les injecte au niveau du Template.
3. Itérer sur une collection de produits.
La directive *ngFor permet d’itérer sur une collection (liste).
L’exemple suivant utilise cette directive pour afficher un liste de produit sur le browser.
Le composant est
|
import { Component } from '@angular/core';
@Component({ selector: 'app-root', templateUrl: './app.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'liste de produits'; produits = ['Samsung', 'motorola', 'Nokia', 'oppo']; designation = this.produits[0]; }
Et app.html <h1>{{title}}</h1> <h2>meilleur produit: {{designation}}</h2> <p>Produits:</p> <ul> <li *ngFor="let prod of produits"> {{ prod }} </li> </ul>
|
4. Utilisation des objets de type produit
Maintenant on veut que la collection soit une liste d’objets produit. Et chaque produit à un id, désignation et un prix.
Nous créons une classe pour représenter les produits.
ng generate class produit
Et modifier le contenu à
export class Produit {
constructor(
public id: number,
public designation: string, public prix: number) { }
}
Maintenant, modifions le code de composant
|
import { Component } from '@angular/core'; import {produit} from './produit';
@Component({ selector: 'app-root', templateUrl: './app.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'liste de produits'; produits = [new produit(1,'Samsung',20), new produit(2,'motorola',15), new produit (3,'Nokia',10), new produit(4,'oppo',8)]; favorite = this.produits[0].designation; } |
<h1>{{title}}</h1> <h2>meilleur produit: {{favorite}}</h2> <p>Produits:</p> <ul> <li *ngFor="let prod of produits"> {{ prod.designation }} </li> </ul> |
5. Affichage conditionnelle avec NgIf
Par exemple
Ajouter ce fragment au template
<p *ngIf="produits.length > 3">il y a plusieurs produit!</p>
Résultat
Puisqu’il y a 3 produits, la phrase il y a plusieurs produit! Sera affiché.
Supprimer un produit et tester( résultat : pas d’affichage).
6. Les entrées utilisateur
Les actions de l’utilisateur telles que click un link, pushing a button, et la saisie du texte déclenchent des DOM évents(evenements). On va voir comment lier ces évents aux gestionnaire des évents des composants en utilisant la synatxe de liaison des évènements d’ Angular.
Liaison des évènement d’entrés de l’user
Pour lier un évent DOM, délimité l’évent par des parenthèses et lui affecter une instruction de Template.
Exemple quand on click sur le bouton le gestionnaire onclickme de composant s’execute.
<button (click)="onClickMe()">Click me!</button>
7. Avoir l’entré de l’user à partir d’une variable de référence de Template
une variable de référence de Template fournit un accès direct à un élément de Template. Pour la déclarer ; précéder l’identifier par #.
Example
|
import { Component } from '@angular/core'; import {produit} from './produit';
@Component({ selector: 'app-root', templateUrl: './app.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'liste de produits'; produits = [new produit(1,'Samsung',20), new produit(2,'motorola',15), new produit (3,'Nokia',10), new produit(4,'oppo',8)]; favorite = this.produits[0].designation;
selected = ''; onkey(value: string) { this.selected = value; }
change(){ this.favorite = this.produits[parseInt(this.selected)].designation;
} } |
<h1>{{title}}</h1> <h2>meilleur produit: {{favorite}}</h2> <p>Produits:</p> <ul> <li *ngFor="let prod of produits"> {{ prod.designation }} </li> </ul> <p *ngIf="produits.length > 3">il y a plusieurs produit!</p>
<input #box (keyup)="onkey(box.value)"> <p>{{selected}}</p> <button (click)="change()">change your favorite!</button> |
Ajoutons un produit à la liste
Modifions le Template. Et modifiant le composant
|
import { Component } from '@angular/core'; import {produit} from './produit';
@Component({ selector: 'app-root', templateUrl: './app.html', styleUrls: ['./app.component.css'] }) export class AppComponent { newdess=''; newprr=0; title = 'liste de produits'; produits = [new produit(1,'Samsung',20), new produit(2,'motorola',15), new produit (3,'Nokia',10), new produit(4,'oppo',8)]; favorite = this.produits[0].designation;
selected = ''; onkey(value: string) { this.selected = value; }
change(){ this.favorite = this.produits[parseInt(this.selected)].designation;
} changedes(designation){ this.newdess=designation; } changepr(pr){ this.newprr=pr; } ajouter(){ let max=0; for (let p of this.produits) { if (max<p.id) max=p.id; }
let prod=new produit(max+1,this.newdess, this.newprr);
this.produits.push(prod);
} } |
<h1>{{title}}</h1> <h2>meilleur produit: {{favorite}}</h2> <p>Produits:</p> <ul> <li *ngFor="let prod of produits"> {{ prod.designation }} </li> </ul> <p *ngIf="produits.length > 3">il y a plusieurs produit!</p>
<input #box (keyup)="onkey(box.value)"> <p>{{selected}}</p> <button (click)="change()">change your favorite!</button>
<input #newdes (keyup)="changedes(newdes.value)"> <input #newpr (keyup)="changepr(newpr.value)">
<h2>meilleur produit: {{newdess}}</h2> <button (click)="ajouter()">Add</button> |
[Le property Binding]
un mécanisme de liaison "one way". comme l'interpolation. L'interpolation ne suffira pas pour tout contrôler (images, styles, etc...).
avec le "property binding" on peut contrôler n'importe quelle propriété.
Il est une autre manière pour créer de la communication dynamique entre le composant (typescript) et le Template. Au lieu d'afficher simplement le contenu d'une variable, on peut changer r dynamiquement les propriétés d'un élément du DOM en fonction de données de la classe de composant.
On utilise L'annotation suivante […] ou on peut préfixer par bind- les propriétés. Le Property Binding est utilisable :
- Sur un élément du DOM. Par exemple <img [src] ="…" /> ou <img bind-src ="…" /> .
- Sur un attribute directive. Par exemple <div [ngClass] ="…"> ou <div bind-ngClass ="…">.
- Sur la propriété d'un component. Par exemple <page [color] ="…"> ou <page bind-color ="…"> .
Exemple
|
import { Component } from '@angular/core';
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { i=4; nomlivre = 'eXtreme Programming Explained'; urllivre = 'https://robohash.org/xp?set=set4'; existe = false; changedis(){ if (this.existe) this.existe=false; else this.existe=true; }
changeurl(){
if (this.i==4) {this.urllivre = 'https://robohash.org/xp?set=set'+this.i;this.i++;} else {this.urllivre = 'https://robohash.org/xp?set=set'+this.i;this.i--;} } |
<img [alt]="nomlivre" [src]="urllivre">
<button type="button" [disabled]="!existe">acheter</button> <button type="button" (click)="changedis()">rendredisponible</button> <button type="button" (click)="changeurl()">chagerimage{{i}}</button> |
]