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.

Découvrir Angular 2

Découper les templates proprement

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Si vous souhaitez mieux organiser votre projet, vous constaterez que les templates dans le fichier du composant ne sont pas une solution. Découvrez comment les sortir.
03:41

Transcription

Pour le moment, ce qu'on a fait, ça fonctionne. Concrètement, c'est simple, on vient simplement renseigner le template, directement dans le code, ici on va utiliser la propriété template, sur l'annotation de composant ; component. Mais selon moi, c'est pas la meilleure des façons. On va récupérer cette partie-là, vous allez la sélectionner et la couper. Et puis ici, on va supprimer également toute cette partie, et on va dire lui non pas template, mais template URL. À quoi sert template URL ? Eh bien, à définir un template extérieur, qui sera designé à l'extérieur de votre component. Selon moi, c'est une des meilleures façons de faire, pourquoi ? Parce que vous allez pouvoir vous retrouver avec un modèle un peu plus MVC, avec du code dans le composant, vraiment la logique métier à l'intérieur de votre classe de composants. Et votre template à l'extérieur, que vous allez travailler, séparément. Comment on va faire pour que ça fonctionne ? On va devoir renseigner directement ici, le chemin. Ca va être app et app point HTML . Vous remarquez que ceux sont bien des fichiers HTML très simples. On va venir créer ce nouveau fichier que nous n'avons pas encore : app.html Et comme vous aviez coupé, vous allez coller. On va simplement coller les informations, du HTML pur, à l'intérieur. On va très simplement ici, enregistrer toute cette partie-là. Vérifier que notre Angular 2 continue à fonctionner, effectivement, pas de problème, ça continue bien à fonctionner. On regardera que la compilation s'est bien exécutée, effectivement, vous remarquerez qu'ici, il a bien récupéré votre nouveau fichier app.html et il l'utilise. Pensez bien à utiliser template URL plutôt que template. Après ça va dépendre des cas, peut-être que vous aurez des petits composants, de temps en temps, à développer. Mais je vous conseille vraiment d'utiliser plutôt le template URL, et de séparer votre fichier HTML, pour éviter de mélanger les informations. Ici on a une structure HTML, qui va dans un fichier HTML : c'est plus simple de venir le renseigner directement dans un fichier comme ça, que d'avoir du code, surtout si votre template est un petit peu long. Je vous conseille également d'organiser proprement, c'est à dire que votre composant se trouve dans le dossier app, pensez à mettre le template avec le composant. Ca peut être intéressant d'avoir les mêmes informations. Si vous voulez pousser un peu plus, vous pouvez tout à fait, sans aucun problème, nommer votre template HTML comme votre composant, ça peut aider dans de nombreux cas, notamment quand on cherche quelque chose. Si vous faites ça, n'oubliez pas de venir renseigner le vrai nom, sinon vous allez avoir un conflit, il ne trouvera pas ce que vous avez demandé. Vérifiez aussi que dans votre navigateur, vous n'avez pas de problème, et que ça charge bien le template que vous venez de renseigner. Voyez qu'il est assez simple de s'organiser, et rapidement, ça devient propre. Avec Angular 2, vous allez réussir à faire du code propre et à faire du tiny code ; donc du petit code, que vous allez exécuter, vous verrez que c'est très sympa à utiliser, et surtout, on s'y retrouve très rapidement. Vous n'allez pas être perdu, vous allez voir, c'est simple. Là vous le voyez déjà, renseigner un template , ce n'est simplement qu'une propriété de composant, quasiment tout fonctionne pareil, à chaque fois, si vous avez de bonnes propriétés et avez bien compris le concept, vous allez aller extrêmement vite à coder des applications.

Découvrir Angular 2

Prenez en main toute la puissance du framework AngularJS. Exploitez ses fonctionnalités, et développez rapidement des applications web robustes et performantes !

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