Découvrir les templates-Découvrir angular–Mon premier projet

Ca y est, notre composant est créé, et nous avons initialisé (grâce au ngOnInit) la liste des Clones pour notre application de la guerre des Clones.

 

Attaquons-nous maintenant à la mise en place du contenu HTML pour le composant en cours.

Pour rappel un Component = une classe Component + une Vue (un template).

 

Utilisation de TemplateUrl

A la place de définir du contenu Html directement dans le Component :

@Component({

selector: « clonewars-app »,

templateUrl: « <h1>Liste des clones</h1> »

})

export class AppComponent implements OnInit{

…

}

 

Il va être beaucoup plus intéressant et plus maintenable de séparer les responsabilités, et donc les fichiers.

 

Nous allons utiliser le templateUrl à la place du Template.

Nous définissons l’url d’une Vue dédiée pour la génération du HTML du composant.

 

Faire attention au chemin relatif

Intuitivement, on pourrait se dire qu’on va mettre le chemin relatif, par rapport au AppComponent.

Comme ceci :

@Component({

selector: « clonewars-app »,

templateUrl: « ./app.component.html »

})

export class AppComponent implements OnInit

 

Or, nous tombons sur une erreur 404, du côté client :

Failed to load resource: the server responded with a status of 404 (Not Found)

 

En fait, il ne trouve pas le fichier, car il le cherche depuis la racine du site web :

http://localhost:3000/app.component.html

 

En effet, ce fichier ne se trouve pas à la racine, mais bien dans le dossier app.

Ce qui nous donne :

@Component({

selector: « clonewars-app »,

templateUrl: « ./app/app.component.html »

})

export class AppComponent implements OnInit

 

And voila

 

Mise en place de l’interpolation

Dans le template utilisé, nous pouvons afficher des propriétés venant du composant.

 

En fait toute propriété (tout champ) du Component peut être affichée dans la Vue : du moment que l’attribut ne soit pas privé.

 

Utilisation des doubles accolades

Prenons pas exemple, un titre :

export class AppComponent implements OnInit{

private _clones: Clone[];

private _title = « Les clones »;

ngOnInit(): void {

this._clones = CLONES;

}

// getter for _title property

get title() {

return this._title;

}

// setter for _title property

set title(value) {

this._title = value;

}

….

}

 

Nous pouvons alors afficher la propriété title représentant le champ privé _title sur la vue :

<h1>{{title}}</h1>

<div>Prepare for war !</div>

 

Les deux accolades sont le moyen pour lire la valeur de la propriété et l’injecter dans la vue HTML.

Il s’agit de binding uni-directionnel.

 

Utilisation des crochets

Prenons maintenant le besoin suivant : nous devons récupérer l’url d’une image, cette url est une propriété de notre Component.

Comment lier cette donnée à la Vue ?

 

Vous allez utiliser les [] autour de l’attribut du noeud html à lier au Component.

Par exemple <img [src]=”cheminImage” />, où cheminImage est une propriété du Composant.

 

Avec ces crochets, on peut même mettre en place des Converter :

<button [style.color]=”estSurveillantEmpereur ? ‘red: ‘white’”;

 

Ici, nous spécifions que le style sera rouge si la propriété estSurveillantEmpereur  est vrai.