Découvrir Angular 2

Placer un écouteur sur l'évènement de type click

Testez gratuitement nos 1300 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Vous allez voir que les évènements sont maintenant reliés aux vrais évènements que l'on connaît déjà avec le DOM. La simplicité est le mot d'ordre d'Angular.
03:20

Transcription

On a maintenant découvert comment passer des informations au Template. Bien sûr, c'est simple, du Composant ici, vers le Template qui se trouve là. On va fermer le style pour le moment, car cela nous sert à rien ! Mais qu'est ce qui va se passer maintenant, si j'ai envie d'interagir avec mon Component depuis le template ? On va parler d'évènements. Contrairement à la version un d'Angular les évènements ne sont pas préfixées par Ng tiret quelque chose. Non, on va utiliser les vrais évènements Html disponibles dans JavaScript de base. Et on va devoir cabler des boutons simplement. Cela pourrait être par exemple, 1A, ou là on mettrait un Href rien et on ferait ici, un évènement. Les évènements par exemple, vous devez les connaître. Il ya un évènement qui s'appelle Onclick, disponible en JavaScript. On ne va pas écrire One, mais on va écrire simplement Click. Et attention, quand on va parler d'évènements qui vont passer des informations interagissant avec le composant, on va donc devoir, ici, parler des Input. Donc, là, on va avoir des informations qui vont être du Template Html, vers le composant et donc à ce moment là, on utilisra cette syntaxe là. On ouvre les parenthèses, on met le type d'évènement qu'on souhaite. Et ensuite avec égale, on va devoir référencer ici, quelque chose. Ce que je vais faire, c'est que je vais mettre un lien qui va s'appeler détail. On va le laisser à cet endroit là pour le moment. Et quand je vais cliquer dessus, j'aimerais déclencher une fonction et puis avoir quelque chose qui s'affiche. Alors, ma fonction, comment je vais l'utiliser ? Eh bien, très facilement, Á l'intérieur de ma Class, je vais référencer une fonction qui va interagir. Moi, je vais l'appeler Onclick, mais vous pourriez l'appeler comme vous voulez. On peut l'appeler Gat details, cela n'est pas un problème. Pensez à faire cela en anglais, car on est dans du code en anglais. Vous pouvez mettre du français dans les titres, les textes, etc. Quand vous codez, codez en anglais, c'est beaucoup plus simple ; surtout, si vous devez interagir avec d'autres développeurs, on ne sait jamais de quelles nationalités ils sont. Ici, on va faire quelque chose de très simple : on va faire un console Point Log, et on va lui mettre Pass pour savoir si ça passe passe bien à l'intérieur ; et si cela se déclenche bien au Click. Alors maintenant que vous avez une fonction, ici, Get details, on va devoir l'ajouter à l'évènement Click. Á l'intérieur, ici, on référence la fonction qui sera lancée, quand l'utilisateur cliquera sur ce lien. Quand vous aurez terminé, votre application devrait être recompilée. On va se rendre, ici, au niveau de votre page et on va cliquer sur Détail. Et on devrait avoir une page qui s'affiche. Attention ! comme vous pouvez le voir, c'est extrêmement rapide. Pourquoi, c'est rapide ? parce qu'actuellement, on a ici, un A et le A, c'est un élément Html qui fait une redirection vers une page. Si vous ne lui donnez rien à cet endroit là, forcément, il va recharger la page en cours. Alors une technique assez simple serait de mettre ici, un dièse, qui, du coup, l'amènerait vers Dièse constituant ainsi des encres. Mais c'est pas forcément la meilleure. Moi, ce que je vous propose, c'est que pour le moment, on le laisse comme ça. On voit bien que cela passe dedans, il n'y a pas de soucis. On va voir, ensuite, comment on interagit plus simplement avec les évènements ; qu'est ce qu'on peut faire avec, qu' est ce qu'on peut récupérer.

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 !