Découvrir Angular 2

Découvrir le multiligne avec ES6

Testez gratuitement nos 1324 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Déclarer des template en ligne, c'est possible. Mais si vous pouvez le faire plus proprement, n'hésitez pas. ES6 vous permet une écriture sur plusieurs lignes, sans problème.
03:54

Transcription

Alors c'est pas mal pour le moment, on a un petit bout de template qu'on a ajouté directement dans notre contrôleur. On peut appeler ça un contrôleur, puisque concrètement c'en est un, c'est un composant, ça s'apparente plus ou moins à un contrôleur. Vous remarquez ici qu'effectivement, on a utilisé un template inline, donc sur une seule ligne, c'est pas trop mal, mais imaginons qu'on ait envie de faire quelque chose de plus compliqué, comment on va s'y prendre ? Alors on pourrait se dire, à juste titre, qu'on est en JavaScript et que c'est assez simple, il suffirait de se placer ici et puis de sauter une ligne. Et là, eh bien vous allez avoir une petite erreur. On va vous dire que ce n'est pas possible. En ecmascript 6 et surtout en typescript, on doit respecter certaines normes. Typescript, c'est quelque chose de très important pour lui, qu'on respecte ses codes. Ce qui est génial c'est qu'avec un outil comme ça, donc le visual studio avec les plugins, vous allez avoir toutes les aides possibles, et vous verrez que c'est extrêmement intéressant dans de nombreux cas. Ici, pour faire du multilignes, on va être obligés d'utiliser non pas une simple "quote" comme ça, donc simplement un petit guillemet, on va devoir utiliser ce guillemet-là. Il va falloir le trouver sur votre clavier, ça dépend vraiment des claviers. Vous allez avoir ce petit guillemet qui existe, qui est un guillemet penché, et celui-ci va nous permettre effectivement ici, de venir travailler du multilignes. Si vous utilisez ce guillemet-là, vous aurez la possibilité de faire du multilignes. Quand vous allez utiliser ça, ce que je vous conseille, c'est de démarrer directement en-dessous, ou alors vous pouvez tout simplement ici, commencer de cette façon-là et terminer en-dessous. A partir de là, vous pourrez renseigner des templates, qui vont être un petit peu plus logiques, notamment si en-dessous j'avais envie de mettre comme ça un P, donc un paragraphe, avec quelque chose de marqué dedans, ce ne serait pas un problème. Je peux imaginer avoir un template un petit peu plus compliqué, sur plusieurs lignes, ça va être un petit peu plus facile au niveau de la compréhension. Ici, pour voir si ça fonctionne bien, on va mettre un paragraphe et on va enregistrer. Alors si comme moi, vous avez lancé, je vais le refaire ici, votre application par npm start, du coup il y a une compilation qui est faite, et surtout, il y a ce qu'on appelle un watch, qui permet de vérifier qu'il y ait des changements dans le code, et ça relance automatiquement dans votre navigateur. Là si vous le relancez, ça va vous ouvrir un nouvel onglet, en l’occurrence ici, vous remarquerez bien qu'on a bien un template fonctionnel, il n'y a pas de problème. Alors, je vous conseille quelque chose. Ouvrez votre console de développeur. Pourquoi ? Parce qu'elle va être utile cette console de développeur. Alors si elle est comme moi sortie, pensez à la mettre à l'intérieur ici, on va fermer cette partie-là qui ne sert à rien, et on va regarder dans la console. On verra qu'il y a des petites erreurs pour le moment. On nous dit qu'il est incapable de trouver notre style [inaudible] points. On y reviendra plus tard, les styles ce sera plus tard. Ici, voilà comment très simplement, avec cette espèce de petit opérateur, on va pouvoir utiliser du multilignes en typescript. Alors ce n'est pas très compliqué, mais c'est pas encore le plus propre. Enfin selon moi en tous cas, faire du template comme ça, ce n'est pas ce qu'il y a de plus sympa. On risque de se retrouver rapidement avec un tas d'informations et vous remarquez qu'effectivement, venir définir du template comme ça, ce n'est pas top. Si vous avez fait beaucoup de React, ça va vous parler, parce qu'en React, c'est ce qu'il se passe, on définit le template dans les fichiers de composants, donc là on respecte cette philosophie. Selon moi c'est pas la meilleure, tout mettre à l'intérieur comme ça du composant, c'est pas top. Mélanger le HTML, CSS, il y a de meilleures façons de faire, et on va voir ça.

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
Votre/vos formateur(s) :
Date de parution :6 sept. 2016
Durée :2h50 (40 vidéos)

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 !