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

Angular 2 : Dynamisation des applications

Explorer les types de directives

Testez gratuitement nos 1341 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Il existe plusieurs types de directives. Découvrez ce que ces directives apportent et comment les utiliser au mieux.
04:32

Transcription

En Angular, on reconnaît 3 types de directives différentes. La première, c'est les composants. Comme je vous l'ai dit, on partira plutôt du principe qu'un composant n'est pas une directive. Mais pour le moment, ce n'est pas clair. On ne sait pas encore exactement où on veut aller avec les composants. Ce dont on est certain avec un composant, c'est qu'il y a un sélecteur. Ça affiche un bout de template. Et pour le moment, ça expose de la logique. Partons du principe qu'un composant est effectivement un bout de l'interface. Ici, notre composant Item est ce qui nous permet d'afficher toute cette partie-là. En soi, ça peut être considéré comme une directive. Mais de façon avancée, on le considérera plutôt comme un vrai composant d'interface et non pas comme une vraie directive. Comme dit précédemment, les directives ont plutôt pour attrait de modifier l'interface et de donner une information. Or, ce n'est pas vraiment le cas ici. Mais comme on a parfois de la logique, et de l'information à l'intérieur, ça peut être considéré comme une modification d'interface, mais pas à proprement parler. Les vrais 2 directives qu'on va vraiment avoir dans Angular sont les suivantes : d'une part, les directives structurelles, à savoir des directives de structuration d'interface permettant d'afficher ou pas, par exemple, un bout de template. Et d'autre part, les directives qui nous permettent d'agir sur la vue. Donc, les directives d'attribut. Il existe plein de directives d'attribut. Ici, nous avons utilisé ng-class. Mais il y a aussi ng-style, par exemple, permettant de passer un objet de style. On peut vraiment différencier 2 vraies directives : les directives structurelles et les directives d'attribut. On a déjà un peu parlé des directives d'attribut pendant ce cours. Comme toutes directives, elles se basent sur des paramètres qui vont nous permettre de modifier le contenu. Gardez en tête que, pour Angular, et son équipe de développeurs, on différencie 3 types de directives : les composants, les directives d'attribut et de structuration. Dans votre esprit, c'est clair. vous savez donc qu'il y en a 3, et qu'elles s'utilisent toutes différemment. Généralement, c'est comme ça que les attributs s'utilisent. On a aussi l'attribut Hidden, très connu, ng-class, ng-style... Mais il y en a un tas d'autres faciles à trouver dans la documentation. Et les directives qui vont s'utiliser généralement pour faire des boucles, ou des affichages ou non d'interfaces qui sont toujours préfixés par une étoile. Utilisation : soit avec des attributs, et donc des crochets. Soit en structuration, et ce sera alors avec une étoile. Vous avez ainsi le panel complet. Il est très intéressant d'utiliser les composants en partant du principe que ce sont des directives. Parce qu'un composant en soi nous permet de travailler sur la modularité d'une application. Souvenez-vous de l'exemple qu'on avait écrit ensemble sur Title. Qu'avait-on fait ici dans le composant Title ? On avait sorti un bout de l'interface pour l'exposer dans un autre module. Le but était, bien entendu, de tester les modules. On peut considérer ce composant-là, dont le rôle est de s'occuper d'une partie unique de l'interface, comme une petite directive en soi qui permet d'extraire un bout de l'interface pour le placer ailleurs. Personnellement, j'aurai tendance à dire que c'est un vrai composant d'interface. Mais certains diront que c'est une directive. Ce sont 2 écoles différentes. J'adhère plus à l'école des composants. Vous pouvez aussi penser comme l'équipe de développement d'Angular que ça peut également être considéré comme une directive. Mais partez du principe que vous ne pouvez pas référencer ici le mot "directive" en utilisant une template. C'est impossible de faire ça. Ce sont les composants qui le permettent. Dans les anciennes versions d'Angular, vous l'avez peut-être déjà fait. Il ne faut plus le faire. Maintenant ce sont des composants uniques qu'on utilisera pour faire de la template. Vous pourriez aussi sans problème mettre ce composant Title à l'intérieur de votre composant principal, et tenter de découper toute votre interface pour que chacune des parties de l'interface constitue un composant. On obtiendrait ainsi une interface uniquement composée de composants. Ce serait une très bonne pratique. Et je vous invite réellement à le faire parce que ça fait partie de la modularité et de ce travail en composants qui finiront par former tous ensemble une grande interface.

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 !