Les templates

Ionic propose de nombreuses fonctionnalités dont le but est de faciliter le développement d’interfaces ergonomiques. Dans une page Ionic, le template correspond au fichier HTML.

Compte tenu du fait qu’Ionic est une technologie web, les templates sont composés d’éléments HTML. À ces éléments HTML standards s’ajoutent un certain nombre d’éléments spécifiques apportés par Ionic.

1. Affichage des données

Pour afficher des données issues du code TypeScript, il faut tout d’abord que les données soient des propriétés du composant. Il faut donc que la propriété et sa valeur aient été définies dans le constructeur ou une méthode du composant.

En modifiant la page d’accueil, il est possible d’afficher le texte Bonjour à la fin du document en modifiant le composant du fichier src/pages/home.ts :


@Component({ 
  selector: 'page-home', 
  templateUrl: 'home.html' 
}) 
export class HomePage { 
  texte: String; 
  constructor(public navCtrl: NavController) { 
    this.texte = "Bonjour"; 
  } 
}
 

Il est également nécessaire de modifier le fichier src/pages/home.html pour ajouter la syntaxe à doubles accolades avec la ligne suivante :


{{ texte }}
 

Cette méthode d’envoi de données du composant au template est nommée...

Pour consulter la suite, découvrez le livre suivant :
couv_EPMETION.png
60-signet.svg
En version papier
20-ecran_lettre.svg
En version numérique
41-logo_abonnement.svg
En illimité avec l'abonnement ENI
130-boutique.svg
Sur la boutique officielle ENI
Précédent
Les pages Ionic
Suivant
Éléments graphiques