Sommaire

Application ionic3-list_avatar

1. Compte rendu d’exécution de l’application

L’application ionic3-list_avatar va lister les équipes ayant participé à la Coupe du Monde de football 2018.

L’affichage se présente comme suit :

images/ch30_02.png

2. Analyse des scripts principaux

Comme pour l’application précédente, il n’est pas utile pour les applications basées sur des listes de revenir sur les scripts config.xml, package.json, src/app/app.components.ts et src/app/app.modules.ts.

Script home.html

La section <ion-content> contient le code (partiel) suivant :

 
 <!-- Groupe A --> 
 <ion-list> 
 
   <!-- Header de liste du Groupe A --> 
   <ion-list-header color="secondary">Groupe A</ion-list-header> 
 
   <!-- Liste des équipes du groupe A --> 
   <ion-item> 
     <ion-avatar item-left> 
       <img src="assets/img/Uruguay.png"> 
     </ion-avatar> 
     <h2>Uruguay</h2> 
     <p>La céleste</p> 
     <ion-note item-right>Oscar Tavarez</ion-note> 
   </ion-item>

Le code est relativement explicite :

  • la balise <ion-list> ouvre chaque liste constituée des équipes d’un groupe (ici, le groupe A)

  • la balise <ion-list-header> ...