Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

Découvrir Angular 2

Passer des variables au template

Testez gratuitement nos 1336 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Rendre un template dynamique n'aura plus de secrets pour vous ! Angular est avant tout du dynamisme simple à mettre en place. Ainsi, apprenez à passer des variables.
03:59

Transcription

Ok, on a vu comment faire propre. C'est à dire comment sortir le Template qu'on avait dans le Composant à la base dans un fichier ; c'est génial ! Maintenant on va pouvoir passer à de la dynamisation. Quand je dis dynamisation, je veux parler du passage d'information depuis ce composant qui n'est ni plus ni moins qu'une Class. On pourrait appeler ça un Contrôleur si on le voulait. Ça s'appelle un Composant, c'est le nom qu'on donne à ces petits bouts de code qui font quelque chose, qui définissent une logique particulière. Donc, on va passer de l'information depuis Composant aux Templates. Actuellement, vous voyez que le titre ici, « Salut à tous ! » et que le paragraphe un, et paragraphe ne soient absolument pas dynamiques. C'est un petit peu embêtant, parce que du coup, si j'ai envie de le changer à la volée, je ne peux pas. Puis surtout, j'aimerais aussi pouvoir commencer à travailler avec de l'Angular pur et donc à travailler avec du passage d'information. C'est très facile ! Si vous avez fait de l'Angular un, cela va vous rappeler des petits souvenirs. Si vous n'en avez pas fait, vous allez voir que c'est d'une simplicité enfantine. Ce que vous avez à faire, pour passer des informations depuis un composant et depuis la définition de ce composant en version Template, va être de définir une variable. Alors attention ! On ne va écrire Var, comme ça, car on est en TypeScript. il n'y a aura pas besoin, c'est une Class et donc un objet : On va essayer de penser un peu Objet. Et on va donc ici, simplement définir à cet endroit là une variable. Title de cette façon là. Et on va lui définir un contenu directement. Le contenu cela va être quoi ? « Salut à tous ! », que l'on va couper, que l'on va venir mettre ici, à la place hop, qui lui revient ! Donc, on va avoir la variable Title avec un contenu de type String : « Salut à tous ! ». En faisant cela, vous définissez une propriété à votre Class, simplement une propriété à votre objet, on peut dire ça comme ça. Et vous allez la rendre disponible automatiquement. Angular deux, vous permet en définissant des propriétés de les exploiter directement dans le Template qui est associé. Comment on va exploiter, là si vous avez fait un peu d'Angular un, cela va vous rappeler des souvenirs. Si vous n'en avez pas fait, vous allez voir que cela est facile. On va user l'interpolation que certains doivent certainement connaître. Et pour se faire on va utiliser le système du double accolade, ouvrante et fermante. On va référencer à l'intérieur le nom de la variable, que l'on a définie avant. On vérifiera bien en console que c'est en train de recompiler. Et quand on est au bout, on a le deux-cent Gate, on va se rendre dans le navigateur pour vérifier qu'effectivement, il n'y a pas de problèmes, cela fonctionne bien ! Si on veut vérifier que cela fonctionne vraiment, on pourrait simplement, mettre un salut avec un point d'exclamation comme cela ! Vérifier qu'effectivement ça rafraîchit bien la page, et que cela modifie bien l'information. Si on veut aller au bout, on va simplement, ici, pouvoir définir un texte qu'on va afficher dans le paragraphe. Et ici reprendre un paragraphe qu'on a là et simplement venir le caler à cet endroit ici. Faire la même chose que ce qu'on vient de faire, c'est-à-dire interpoler la variable qui était défini dans Contrôleur. pour venir l'afficher à cet endroit là. Et effectivement, on verra qu'il n'y a pas de problème. On a bien dynamisé notre Template. Donc, je rappelle le procédé : on définit une variable, on lui attribue une valeur, et puis simplement, on vient l'afficher directement dans le Template. Alors évidemment, vous pouvez faire pas mal de chose, hein ! Si on avait ici, des variables qui contiennent des chiffres, on pourrait tout à fait dans l'interpolation, utiliser plus pour venir très facilement calculer. Bien sûr, faire plus, sur deux variables de type texte, cela aura le même effet qu'en JavaScript, c'est à dire que cela fera une concaténation. On peut utiliser ce type de technique, si on a envie très rapidement d'avoir de la concaténation avec des chaînes de caractères Vous restez dans un modèle à peu près JavScript, bien sûr on est en TypeScript qui va donc apporter du typage, mais on voit çà, juste après.

Découvrir Angular 2

Prenez en main toute la puissance du framework AngularJS. Exploitez ses fonctionnalités, et développez rapidement des applications web robustes et performantes !

2h50 (40 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :6 sept. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !