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

Comprendre la directive ngIf

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Certaines directives existent déjà dans le cœur du projet Angular. Ainsi, vous allez apprendre à les utiliser.
05:44

Transcription

Parlons d'une directive particulière : le cas ngIf. J'aimerais vous expliquer ce qui se passe en interne pour que vous soyez conscient des raisons pour lesquelles on utilise ngIf ou Hidden. Quelle est la différence ? Généralement, les directives de structuration affichent ou non un contenu. C'est vrai. On le sait. Mais dans le DOM, est-ce que ce sera affiché ? Ou par exemple, aura-t-on les 2 ? Ou pas ? En utilisant ngIf, il faut savoir que s'il ne doit pas afficher l'élément, il ne l'affichera tout simplement pas. Il ne va donc pas le mettre sur le DOM. Donc que va-t-il se passer ? C'est à la recompilation qu'il verra quels sont les bouts à afficher et qu'il les affichera. Si on regarde ici la génération du code de notre composant item.html qui se trouve là. On verra qu'après le texte « Changer le statut » qui se trouve ici, on a 3 affichages qui sont conditionnés, le premier, le deuxième et le troisième, par des ngIf. Comment ça fonctionne réellement ? Nous avons ici un ngIf sur le premier bouton qui se trouve là avec une condition. Un deuxième ngIf ici, avec condition. Et un troisième ngIf ici, avec condition. Donc, il va parcourir le code, voir s'il a besoin d'afficher ou non des informations, puis vous le dire ici. Pour vraiment essayer de comprendre, ce qui est bien avec ngIf c'est qu'on a bien ici les informations. On sait si c'est passé ou pas. C'est bien parce que vous pouvez regarder les autres commandes qu'on a et voir qu'on a effectivement bien les 2 boutons, donc on a les ngIf. Mais ici, on en a 1 seul. Ce qui veut dire que, sur celle-ci, on devrait avoir 1 seul élément en display Par contre, on a bien l'information au-dessus. On a pas les nœuds dans le DOM. C'est pas juste le fait de cacher l'élément avec une classe css. Avec Angular, c'est le fait de totalement supprimer cette information du DOM, et de ne même pas l'ajouter dans le DOM. Pourquoi devriez-vous utiliser ngIf plutôt que des Hidden ? Le Hidden, c'est intéressant. Pourquoi pas ? Le problème, c'est que ça applique simplement une classe dessus, et que l'élément sera quand même rendu par Angular dans le DOM. Ça utilisera donc des ressources par rapport à votre navigateur. Vous avez tout intérêt à plutôt utiliser ngIf, et permettre au DOM ne pas afficher ou porter l'information. Ce sera extrêmement utile en terme de performance. Vous y gagnerez beaucoup avec cette technique-là. Pour pousser un peu, on pourrait carrément aller sur le dépôt d'Angular et regarder comment fonctionne vraiment la directive. Et vous y verrez comment on écrit aussi une directive. Pour écrire une directive, vous allez faire un 'Import/Directive', 2 'Input' généralement, 2 'TemplateRef', et 2 'ViewContainerRef'. Depuis le core Angular évidemment. Ensuite, vous déclarerez la directive avec un sélecteur particulier. Notez qu'ici, il n'y a pas de templating, mais juste un sélecteur. Et que va faire ce sélecteur ? À l'intérieur, quand vous l'appellerez, il utilisera 'Input' qui se trouve ici, qui permettra de conditionner un affichage ou non en fonction de ce qui va se passer dedans. Pour le contructeur, vous voyez qu'on a une 'Private_hasView' ici Et cette 'Private' est utilisée puisque c'est la condition que vous allez passer. Elle va effectivement utiliser la condition à l'intérieur. Elle se basera ensuite sur le 'ViewContainer' et la template pour faire des vérifications dedans. Si la condition est respectée et qu'il n'y a pas de 'HasView', on va faire un 'HasView/true'. Puis on va isérer un 'CreateEmbeddedView' sur le 'ViewContainer' qui est l'objet qui contrôle la vue de la template qu'on a passée. Donc, du contenu réellement de l'emplacement sur lequel vous avez, en fait, placé cette directive. Sinon, on va tout simplement nettoyer la vue. Et on affichera pas la template. C'est comme ça que ça va marcher. Vous voyez que le code pour faire fonctionner ngIf est extrêmement simple. Il n'y a pas énormément de lignes. Et vous aurez également la possibilité de créer vos propres directives. Ce n'est que ça : c'est-à-dire qu'on les déclare, on pensera évidemment à les ajouter aux déclarations dans notre menu pour les rendre disponibles. Puis, il ne reste qu'à l'utiliser. Vous remarquerez qu'on a ici des petits exemples. C'est vraiment une bonne pratique aussi. Je vous conseille de jeter un œil à tout ce qui existe dans la doc. Vous aurez toujours la documentation au-dessus et des exemples d'utilisation, et des fois même des plnker pour travailler directement sur des bouts de code et pour apprendre à utiliser tout ça. Voyez que vous pouvez utiliser le ngIf directement. Vous pouvez faire un 'template=ngIf' et la condition. Ça marche aussi. Ce sont les 3 déclarations. Ou l'utiliser en tant qu'attribut. Dans ce dernier cas, faites attention parce qu'il faut forcément le mettre sur une balise Template. Dans la vidéo suivante, on parlera des templates HTML et de leur fonctionnement. C'est une template qui existe déjà. Ils se sont vraiment basés sur les recommandations W3C. N'hésitez pas à jeter un œil dans le dossier des directives. Vous verrez toutes les directives qui existent déjà : ng-class, ng-for, ng-If, ng-plural, ng-switch qui est super intéressant et ng_template_outlet qui sont les directives déjà codées que vous pouvez utiliser et qui, en plus, vous donneront plein d'infos sur comment coder une directive.

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 !