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

Angular 2 : Dynamisation des applications

Utiliser les templates HTML5

Testez gratuitement nos 1334 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Brique simple mais souvent utile, le module template d'AngularJS permet de gagner en rapidité dans une application web.
05:11

Transcription

Pour aller au bout du bout et pour que vous compreniez bien Angular 2, je vais vous expliquer le fonctionnement interne du moteur de templating. Il est entièrement basé sur ce qu'on appelle le 'shadow DOM', c'est-à-dire un DOM un peu détaché de votre application qui permet de travailler avec l'élément Template. L'élément Template, c'est quoi ? C'est un des derniers éléments HTML5 qui a été créé et qui permet de travailler sur un élément où on définira un template particulier. Et vous pourrez utiliser ce template particulier ailleurs, le récupérer et l'injecter. Cela veut dire qu'il ne sera pas affiché quand vous rechargerez la page. Il va être stocké dans le navigateur, et en attente. Vous pouvez regarder sur le site de la Mozilla Foundation la description, la documentation et des exemples sympas de l'élément Template. Je vais vous montrer ce que ça donne directement à l'écran. Je le fais directement dans 'index.html', et avant le rendu de 'my-app'. Vous allez comprendre pourquoi. Si vous utilisez ce template à l'intérieur de votre application Angular, Angular comprendra le mot-clé 'Template', et s'attend à en faire quelque chose. En fait, il va stocker des templates sans arrêt, tout le temps. Quand vous voudrez utiliser le mot-clé 'Template' avec Angular, il faudra utiliser ngIf de cette manière-là, en tant qu'attribut en fait. Si vous l'utilisez en balise simple, avec l'étoile, le sucre syntaxique, ça ne marchera pas. Parce que l'étoile, va wrapper les éléments de votre templating. c'est-à-dire que concrètement, pour lui, voilà le contenu de la template. C'est impossible d'utiliser la template et le sucre syntaxique. C'est soit l'un soit l'autre. Je le fais en-dehors pour éviter qu'Angular perturbe le fonctionnement. Là, je vais recharger mon application. J'ai beau faire le tour de mon appli, vous constaterez qu'on ne voit jamais à l'écran 'Mon texte à afficher'. parce que la balise Template est enregistrée dans le navigateur. Elle est en attente. Comment utiliser ceci ? En javascript pur. Attention, pas en Angular. Angular, lui fera le travail pour vous tout seul. Je dois d'abord récupérer la template via un 'CreateElement'. Il faut utiliser 'CreateElement Template'. Je le crée. En créant l'élément, vous voyez un fragment de document à l'intérieur. Dans mon navigateur, je viens de réaliser la création de l'élément Template que j'avais référencé. Mais ce serait bien de savoir s'il contient du contenu à l'intérieur. Pour ça, vous pouvez directement utiliser cette ligne-là afin de récupérer le template qui porte l'ID Template et d'afficher le contenu. Et quand j'affiche Content, mon contenu de l'élément Template, portant l'ID Template. je retrouve bien à la fin mon texte à afficher. C'est ainsi que ça fonctionne. Vous avez des éléments qui sont dans un shadow DOM, c'est-à-dire un DOM un peu virtuel qui attend de faire des choses. Angular 2 créera tout le temps un tas de templates qui seront référencées et en attente d'utilisation, mais copiées ou injectées dans le rendu final que si vous les appelez ou si les conditions sont réunies. Ça fonctionne ainsi. Il n'y a rien de magique. C'est simplement une des meilleures utilisations de la balise Template pour faire de l'affichage. Quand vous l'avez récupérée, vous pouvez en javascript l'injecter où vous voulez. Et étant donnée que c'est une template, on pourrait surtout avoir des placeholders à l'intérieur qu'on peut remplacer, avoir plusieurs éléments qui seront remplacés, avoir des emplacements prévus pour recevoir d'autres contenus. Le templating sert à ça. Et c'est une très bonne façon de faire aujourd'hui. La balise Template est géniale à utiliser. Angular, lui, en fait une utilisation conséquente, puisque quasiment tout ce que vous référencez en tant que template sera transformé en élément Template, et mis en attente d'affichage. Si aucune condition n'est placée dessus, ça s'affichera tout seul. S'il y a des conditions, il faudra que ces conditions soient respectées pour permettre l'affichage. C'est le cas de l'utilisation du ngIf. Quand vous faites ça, sachez qu'au-dessus de l'élément où vous référencez un ngIf, une template est appliquée. Et cette template correspond à l'intérieur complet de ce que vous avez référencé. Faites attention : quand vous en avez d'imbriquées, vous ferez monter la mémoire utilisée du navigateur, ce qui impactera sur la performance. C'est pour cette raison qu'il faut essayer de trouver des solutions. Utilisez donc ngIf avec parcimonie. N'en mettez pas trop si vous voulez une application rapide. Ça fait partie des choses à savoir quand on veut optimiser une application. Plus il y a de ngIf, et plus c'est critique. Donc moins il y en a, moins c'est critique. Il faudra donc trouver des pivots différents pour faire des affichages ou pas. Il pourrait s'agir notamment d'utiliser des composants dans les composants. En redécoupant ainsi les composants, vous allègerez beaucoup les ressources de vos composants parents.

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 !