Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

Angular 2 : Dynamisation des applications

Définir les états sur un objet

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Créez une première animation simple, en travaillant sur l'état d'un élément. Appliquez également un peu de CSS.
05:34

Transcription

Vous avez sûrement déjà entendu parler d'animation dans une application web. C'est à dire que concrètement, par exemple, quand je vais cliquer à un endroit, je vais pouvoir jouer des animations. Alors ça c'est pas mal parce que en fait ça nous permet d'animer une application et une application animée forcément est beaucoup plus intéressante pour un utilisateur. Ça amène un petit côté sympa. Comment on va réaliser ça avec Angular 2 ? Et bien il faut savoir que sous Angular 2, vous avez possibilité d'utiliser un framework d'animation. Alors on va devoir d'abord préparer un petit peu le projet pour pouvoir l'utiliser. Et puis il faut bien comprendre ce qu'il se passe. Nous on va pas agir dans le component.ts, ni dans l'index on n'aura pas besoin de ça. Tout ce qui va nous intéresser ça va être l'item.ts qui en fait s'occupe ici d'afficher un seul item à cet endroit-là. On va aussi travailler avec l'item.ts le modèle, parce que le modèle on va devoir travailler dessus pour venir agir sur une propriété. Cette propriété je l'ai déjà référencée ici, c'est 'animateState'. Donc vous pouvez déjà la rajouter. Et puis ensuite il va falloir, à l'intérieur du item.html, référencer un comportement. Alors ça se passe donc en trois étapes, on verra qu'il y en a d'autres également mais en tout cas on va déjà commencer par ça. Alors préparons un petit peu le terrain. Donc pour préparer le terrain ici on va devoir ajouter beaucoup de nouvelles choses. On va devoir ajouter 'trigger'. On va devoir également ajouter 'state' qui va s'occuper de gérer les états d'animation. On va devoir utiliser 'style'. 'style' ça va nous permettre de gérer les styles. On va devoir utiliser 'transition' qui se trouve ici. Et puis enfin un dernier qui va être utile : 'animate'. Quand vous aurez importé tous ces éléments-là, vous aurez possibilité de travailler avec l'animation. Alors il faut savoir que toutes ces classes sont déjà référencées dans angular/core ce qui veut dire que quand vous installez Angular vous avez déjà à disposition tout un set d'utilitaires qui vont vous permettre de travailler. Quand vous aurez fait ça, on a déjà une première partie de l'animation parce qu'on a déjà importé les différents éléments. Alors je reparlerai de l'importation un petit peu plus tard et du fait d'exporter et d'importer et de pouvoir donc travailler avec des classes qu'on va créer soi-même. item.ts vous allez, je l'ai dit, ajouter un 'animateState'. Alors 'animateState' qu'est ce que ça va faire ? Ça va simplement donner l'information à Angular de ce qu'il se passe. Et ça pour pouvoir l'utiliser il va falloir obligatoirement qu'on utilise une fonction. Donc on va référencer ici une fonction qui sera publique. Donc on va simplement la référencer et l'écrire, et elle va s'appeler 'toggleState'. Alors faites attention, parce que moi j'ai déjà un State sur mon objet et puis j'ajoute un 'animateState'. Bon moi je sais que 'toggleState' ça va jouer sur 'animateState'. Mais des fois on peut se tromper. Donc le mieux serait même de référencer 'AnimateState'. Comme ça on sait vraiment ce qu'il va se passer et pour un autre développeur qui viendrait travailler sur le projet on n'aura pas de problèmes. Que va faire le 'toggleAnimateState' sur le modèle ? Et bien il va permettre au clic par exemple de changer le State. Comment on va changer le State ? Ben on va simplement venir copier cette partie-là. Et on va lui dire : quand tu appelles cette fonction, si c'est 'inactive' tu mets 'active', si c'est 'active' tu mets 'inactive'. Et pour ça on va utiliser un joli petit ternaire. On va simplement copier cette partie et on va lui dire : ça est === à 'inactive', alors dans ce cas-là qu'est ce qu'on va faire ? On va lui mettre 'active'. Sinon, on va lui remettre du 'inactive'. Alors vous pouvez stocker si vous voulez les chaines de caractère dans une variable et puis les appeler. Bon ça changera pas grand-chose, là c'est un petit ternaire. Ce petit ternaire on va devoir maintenant l'implémenter. Alors où est ce qu'on va l'implémenter ? Bon ben on peut l'implémenter où on veut, par exemple sur la 'div' plus haut, sachant que là on a à disposition dans l'itération l'item, on peut donc le faire n'importe où. Alors je vais le câbler sur un clic, comme ça. Et puis au clic qu'est-ce que je vais lui dire ? Et bien je vais lui dire d'agir sur 'item', et je vais lui dire d'appeler ma méthode créée précédemment : 'toggleAnimateState' comme ça. Alors là, comme ça, on va pas voir ce qu'il se passe dans l'interface donc le plus intéressant ce serait, ici à l'intérieur de 'toggleAnimateState', pour pas venir polluer l'interface, de faire un petit console.log juste en-dessous pour qu'on ait l'information et qu'on voit bien que ça fonctionne dans l'interface. L'idée ici c'est simplement de savoir que ça fonctionne. Donc là je vais enregistrer, ça va recharger automatiquement, et puis je vais aller ici cliquer. Alors ici on voit bien que ça passe à 'active'. Quand je reclique ça passe à 'inactive'. 'active', 'inactive' à chaque fois. Alors commencez bien avec l'état 'inactive' parce qu'il n'y a pas d'intérêt en fait à commencer avec 'active' évidemment. On va préférer commencer avec 'inactive'. Bon là on a plus ou moins préparé le terrain. À chaque fois que vous allez travailler sur de l'animation, vous serez obligés de préparer en amont des méthodes qui vont vous permettre de changer l'état. Alors ici on parle vraiment d'un State, le State non pas global de l'application mais un State vraiment sur l'objet, parce que c'est ce qu'on va animer qui va changer. On pourrait le faire sur n'importe quoi, moi j'ai choisi de vous montrer sur l'item parce qu'actuellement c'est un peu ce qui va se passer le plus dans notre interface, on va venir ajouter des items, donc on a aussi envie que ces items puissent être animés. Alors je récapitule très rapidement. Il faut d'abord dans un premier temps venir ajouter ici les différentes classes que l'on va utiliser qui sont des classes inhérentes à angular/core. Qui sont déjà référencées. Donc nous on vient simplement les utiliser. Il n'y a pas d'autre import à faire que ça. Et puis ensuite on prépare notre modèle pour pouvoir recevoir de la logique de changement d'état. Et ici donc ça va se concrétiser par une propriété 'animateState'. Alors attention, n'oubliez pas de la référencer en haut et puis surtout, une petite fonction qui aura effet sur le clic.

Angular 2 : Dynamisation des applications

Apprenez à dynamiser vos applications avec AngularJS. Créez un module parent, utilisez le moteur d’animation intégré, découvrez les cycles de vie disponibles, etc.

2h03 (28 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :31 oct. 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 !