Angular 2 : Dynamisation des applications

Découvrir les états magiques

Testez gratuitement nos 1333 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Vous pouvez laisser le framework appliquer des animations sur tout état existant. Appliquez ici une technique simple.
03:23

Transcription

Il existe également un état magique. Alors on appelle ça un état magique tout simplement parce qu'on va pouvoir contrôler le passage d'un état à l'autre mais de n'importe quel état vers n'importe quel état. Et c'est là où c'est très intéressant. Alors par exemple, on pourrait lui dire que quand ça passe de 'inactive' à n'importe quoi ou plutôt de n'importe quoi à 'inactive', dans ce cas-là je veux une animation. Sinon j'en veux pas. Cet opérateur magique, c'est celui-ci. C'est l'étoile. Le 'wildcard' comme on l'appelle. Quand vous allez l'utiliser, vous allez pouvoir avoir n'importe quel état sur votre propriété. Alors c'est très utile pourquoi ? Parce qu'on peut de temps en temps se dire qu'on a pas que deux états. On en a même plusieurs pourquoi pas. Vous voyez l'état ça pourrait carrément être le 'state' qu'on a là. Le 'state' ici c'est : à livrer, en cours de livraison, commande livrée. On pourrait avoir une animation en fonction de ce 'state' là particulier. Et pour le coup, ici on n'en aurait pas que deux on en aurait trois. Donc du coup on pourrait contrôler beaucoup d'animations et dire que quand ça passe de n'importe quel état à 'inactive', effectivement là on a une animation. Alors on va le tester, effectivement ici on voit que l'animation se fait de 'inactive' vers n'importe quoi mais que si on est du coup sur l'autre, c'est à dire de 'active' à 'inactive', qui doit normalement passer à 'red', et bien on n'a pas d'animation. Donc ça c'est très intéressant parce que ça vous permet de contrôler. Si vous voulez contrôler de n'importe quel état vers n'importe quel état vraiment, c'est à dire sans avoir du tout à toucher aux différents 'states', vous pouvez aussi utiliser étoile vers étoile. Et étoile vers étoile ça voudra dire n'importe quelle animation ... n'importe quel état sera animé avec cette animation référencée ici. Donc là ça va fonctionner dans les deux sens également. Alors c'est vraiment très sympa. Vous pouvez aussi essayer quelque chose d'intéressant, c'est partir sur un item qui à la base, a un autre 'state'. Par exemple, 'created'. Le 'state' 'created' il n'a pas été référencé de notre côté. Donc ici, 'created', il n'existe pas. Au départ. C'est pour ça que quand on va charger, tout va être noir de façon classique par contre quand je vais cliquer, effectivement je vais passer au premier état, puis je vais passer au second état et ici on se rend bien compte que les animations continuent à fonctionner alors que nous n'avons jamais référencé de 'state'. Tout simplement parce que étoile vers étoile va vous permettre de contrôler n'importe quel état vers n'importe quel état. Donc on pourrait passer d'un état classique à un autre état, ce ne serait pas un souci. Par exemple ici, il serait possible de dire : si au départ c'est 'created' dans ce cas-là ça devient actif. Et sinon, ça devient inactif. Ce qui veut dire qu'au début je vais avoir 'created', ensuite actif ensuite inactif et si je veux ici je peux en mettre un autre, par exemple je pourrais repasser à 'created' au tout début. Donc comme ça si c'est 'created' ça passe 'active' et sinon ça repasse à 'created'. Ce qui fait que là je vais avoir une transition du noir, directement vers le bleu et vers le noir. Sans aucun problème. Parce que pour le coup vous voyez j'ai plus de 'inactive' dans mon changement d'état. Après c'est à vous bien sûr de concevoir la logique métier derrière votre animation le but de cet atelier est évidemment de bien comprendre les animations et de comprendre comment elles fonctionnent. À vous ensuite de travailler et donc de vous dire : ben écoute moi là ici j'ai des 'states' particuliers, ces 'states' là vont avoir des animations particulières, vous pouvez travailler sur tout ce que vous voulez au niveau css aussi ça c'est important de le garder à l'esprit. C'est à dire qu'on pourrait faire grossir des textes, on pourrait animer, on pourrait vraiment s'amuser à faire tout et n'importe quoi parce que c'est prévu pour ça concrètement, c'est exactement ce que ça va faire.

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 !