Découvrir Angular 2

Importer des styles depuis un fichier

Testez gratuitement nos 1324 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Vous pourrez sortir les styles pour garder une cohérence dans l'organisation de vos sources. Voyez comment procéder.
04:13

Transcription

Alors c'est vrai, oui, c'est sympa de définir les styles comme ça. Pensez que vous auriez pu utiliser souvenez-vous, le multi ligne, qu'on a déjà utilisé ici, en Angular, que je vous ai déjà montré, on peut tout à fait utiliser ici, effectivement également, la multi ligne, pour venir faire ça sur plusieurs lignes, et formater ça proprement. Ca va fonctionner sans aucun problème, si vous regardez ici la compilation, ce sera la même, il n'y a aucun soucis, le multi ligne fonctionne. Ça peut être sympa de garder un petit tableau, quand on a besoin de faire des styles assez simples, des lignes différentes dans un tableau. Et puis c'est le but. Mais alors, je suis un peu embêté avec ça, pourquoi ? Parce que j'aimerais bien que ces styles, je ne les ai pas comme ça, mais je les ai vraiment dans un fichier externe. Alors, on va les récupérer, ces différents styles, on va enlever la propriété styles, et à la place on va renseigner, non pas styles mais styles URL. En définissant ça, vous allez également ouvrir un tableau, et devoir à l'intérieur, référencer ici le ou les fichier(s) CSS que vous voulez ajouter. Ici, il va bien falloir le créer parce qu'on ne l'a pas. Je vous conseille, s'il est dépendant de votre component, de le nommer de la même manière. Donc on va l'appeler : app.component.css Quand vous aurez fait ça, il suffira simplement de coller à l'intérieur. Ce qui est bien, c'est que vous êtes sur un éditeur assez intelligent, il vaut mieux utiliser des fichiers CSS externes, d'ailleurs vous pouvez aussi utiliser la technologie SAS, qui marche pas mal, il y a des petites implémentations qui traînent sur internet. Il y a plusieurs raisons à l'utilisation de fichiers CSS, tout simplement, on va avoir de la complétion un peu plus logique, quand on est en train d'éditer son CSS et comme vous pouvez le voir à l'écran, vous avez les couleurs quand on utilise les couleurs, ce qui est quand même pas trop mal. Et aussi, ce qui est génial, c'est qu'on a accès à la palette. Si j'ai envie, je peux mettre du light quelque chose, light green par exemple. Ici, et là je pourrai mettre également du light blue. Voyez que, ça auto-complète, le tunning est vraiment super efficace. C'est très intéressant de pouvoir se balader. Pour le light red, vous n'en aurez pas, ça sera plutôt du light pink qu'on viendra prendre. Vous remarquez bien qu'ici, maintenant j'ai un fichier externe. Qu'est-ce que je vais faire ? Je vais devoir le renseigner. Ici c'est de la string que ça prend également, ça va être : app/app.component.css C'est tout ce que vous avez à faire. Là si vous avez plusieurs fichiers CSS, vous pouvez les renseigner, c'est un tableau je vous le rappelle, donc il n'y a aucun problème pour venir imbriquer plusieurs feuilles de signes les unes derrière les autres, sans aucun souci. Pensez bien également qu'avec des technologies comme SAS, vous auriez peut être moins de codes à écrire, ça gère les imports etc, ça peut être pas mal quand on veut organiser un peu son code. Bon, voyons voir si ça fonctionne. Aucun problème, ça marche très bien également. On remarque qu'ici, on a toujours l'encapsulation, on va pouvoir appeler ça comme ça. L'encapsulation de nos styles pour le composant actuel. Alors ça, ce sont des fonctionnalités qui sont proposées et fournies par le Shadow DOM, avec le Shadow route qu'on a ici, on voit qu'on a un Shadow DOM qui est créé, c'est ce qui nous permet d'avoir une pré-compilation et d'avoir quelque chose qui va être uniquement disponible dans le composant. Je vous conseille de vous renseigner un petit plus sur les CSS, parce qu'il y a plein de choses qu'on peut faire avec Angular et les CSS. Moi, je vous montre la base pour vous permettre d'apprendre et de comprendre comment ça fonctionne. et vous pouvez pousser sans aucun problème cette partie là, elle est assez sympa. Vous verrez qu'il a a pas mal de choses à faire. En tout cas, soit vous les écrivez directement avec styles, soit vous les renseignez avec styles URL, là vous avez les deux manières de faire. À vous de voir ce qui vous intéresse le plus, et ce que vous trouvez le plus propre. Personnellement, mon avis, c'est que des fichiers CSS externes, c'est très bien et ça va dans la logique d'avoir, ici, dans notre composant, uniquement le code métier du composant, ce qui est beaucoup plus propre à la lecture, à l'écriture, au debug, etc.

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 !