Angular 2 : Dynamisation des applications

Partager des modules

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Un module peut être seul ou partagé. S'il est partagé, il faudra le déclarer comme tel. Julien Moulin vous explique comment procéder.
06:29

Transcription

Pour en finir avec la modularité, pour que vous compreniez bien le principe, l'idée pour moi, c'est quand même que vous puissiez l'appliquer dans vos projets, on va créer un petit module supplémentaire, et on va l'injecter, et on va voir comment ça fonctionne. Alors moi ce que j'aimerais créer en fait, c'est simplement un petit module qui me permette d'extraire cette partie-là. Et en fait, cette partie-là je vais la mettre dans un autre module, et je vais pouvoir ensuite du coup utiliser ce module là. Alors, vous allez voir un peu les injections, vous allez voir comment ça se goupille et comment on va pouvoir travailler avec tout ça. Alors, première chose évidemment, ça va être de créer un nouveau dossier. On va créer un dossier, qui va pour le coup ici, s'appeler comment ? S'appeler title. Il peut s'appeler comme vous le voulez, moi je vais l'appeler title, mais vous pourriez l'appeler de toutes les façons possibles. On va créer un fichier dedans, title.module.ts. Pensez bien à conserver des noms corrects, quand c'est un module, on met module, quand c'est un composant, on met composant, etc, etc. On va créer aussi un fichier title.component.ts, et enfin on va créer un fichier, title.component.html, pour avoir du HTML à l'intérieur qui soit relié. Alors, vous n'allez pas tout faire à la main, évidemment, vous avez déjà des choses existantes, on va les utiliser. Alors la première chose qu'on va renseigner ici, ça va être notre module. Notre module, comment ça va s'écrire, on va récupérer tout le code qu'on a là, et je vais vous montrer. On n'a pas besoin de BrowserModule, parce que ça va servir essentiellement pour ajouter à toutes les directives et les choses un peu simples, pas les NgIf, etc, donc ça c'est plutôt pour le module qu'on va bootstrapper. Ça, on en a pas besoin non plus, parce que c'est le framework de formulaire, bon, je ne vais pas l'utiliser, donc ici les imports, voyez qu'il y en a pas, on va supprimer la ligne. Ensuite, on n'a pas besoin du pipe, on n'a pas besoin du form, on n'a pas besoin de l'item, pour le moment, en tout cas. Et ici, le composant, ce n'est pas AppComponent qu'on va vouloir, ça va être titlecomponent, qui va se trouver où ? Qui va se trouver sur le fichier title.component. Pour le moment, il n'existe pas, donc, c'est normal qu'il soit en rouge comme ça. Tant que vous n'avez pas renseigné les informations, il vous dit qu'il y a une erreur. Et ici, dans les déclarations, on ne va avoir que titlecomponent. Ici, vous remarquez déjà une première chose, c'est qu'on va avoir un module, qui ne va contenir qu'un seul composant, et qui va donc devoir l'exposer pour pouvoir l'utiliser ailleurs. Ce module s'appelle titleModule, faites attention aux nommages, et maintenant on va passer aux composants. Pour le composant, c'est pareil, vous avez déjà des choses existantes, donc on va tout récupérer jusqu'au constructeur, parce que ce sera suffisant. Et on va mettre ça dans le title.component. Alors, on n'a pas besoin de l'item, par contre, on va avoir besoin de la config. Pourquoi ? Parce que sur la config est stocké, en fait, le title. On n'a pas besoin de la version, on enlève tout ça. On enlève toute cette partie-là aussi. Après, on ira faire un petit peu de nettoyage de l'autre côté pour que ce soit propre. Le style, bon on peut l'enlever pour le coup, et ici, on va renseigner le bon template, ça va être appTitle, et ici, title.component. Enfin ici, on va devoir référencer une balise sélecteur pour pouvoir utiliser ce composant, mytitle, par exemple. La configuration, attention, elle se trouve un dossier plus haut, donc on le renseigne proprement, là, ça commence à devenir intéressant. Ici, c'est titleComponent, donc, on a ici maintenant un composant title propre. Pour le HTML, il suffit simplement de reprendre le App.Component.html, et d'extraire cette partie-là, et de venir la mettre tout simplement dans notre html parce que c'est ce qu'on veut. Le title ici, va être renseigné par le title qu'on a passé, sur le composant, donc ça c'est bon, on peut fermer cette partie. Normalement, sur notre titlemodule, il n'y a plus de rouge. Parce qu'on a créé les composants, on l'a déclaré, c'est bon. Maintenant qu'on a tout ça, il va falloir relier ce module directement dans notre AppModule. Notre AppModule ici, il importe déjà des modules, qui sont des modules faisant partie d'Angular. Nous, on va faire quasiment la même chose. TitleModule, sauf que plutôt que de l'importer depuis Angular, on va l'importer depuis chez nous parce que c'est notre module. Donc, où est-ce qu'il va se trouver ? Il va se trouver tout simplement dans title. Et puis ensuite, dans slash, et puis title.module. Alors, attention, parce qu'il faut partir d'une racine, donc c'est .slash, pour dire qu'on part du dossier. Quand vous aurez fait ça, il va falloir l'importer. Donc on va l'importer, on va le mettre ici. Et on va recharger et on va bien enregistrer tous les fichiers. Qu'est-ce qu'il va se passer ? On n'a plus de title ici qui s'affiche. Et actuellement, on n'a pas relié du tout l'utilisation de notre title composant qui est référencé dans titleModule, parce qu'on n'a pas utilisé sa balise. Mais moi, j'ai envie de l'utiliser, j'ai envie ici de déclarer du coup, my-title. Et je vais fermer. J'enregistre et logiquement, je me dis tiens, ça va fonctionner, je vais avoir quelque chose. Et là, on voit qu'il n'y a plus rien qui charge. Alors, je vous conseille d'ouvrir la console et d'aller voir un peu, vous allez voir, vous allez avoir un message qui vous dit qu'il ne connaît pas my-title. Pourtant, on a bien tout référencé. En fait, en réalité, on n'a pas tout bien référencé. Je vous explique, dans un module, qui est un module extérieur au module principal, vous allez pouvoir référencer plein de choses. Notamment, vous allez pouvoir référencer d'autres composants qui vont interagir les uns avec les autres. Mais si vous ne les exportez pas, vous ne pourrez pas les utiliser ailleurs. Donc si vous souhaitez utiliser le titleComponent ailleurs, qu'à l'intérieur de votre module title, vous allez devoir faire un export. Pour ça, il faut utiliser le mot-clé export ici. Et il faut renseigner de la même manière que les déclarations, les composants que vous voulez exposer. C'est des composants qui deviendront publiques, et qui pourront être utilisés partout. On le renseigne, on enregistre, on attend que la compilation se refasse. Et en toute logique, ça va maintenant apparaître. Et voyez que ce qui est rendu ici, on peut aller regarder directement avec l'explorateur. On voit qu'ici effectivement, on a bien la balise my-title, et que cette balise, elle fait partie en fait d'un composant extérieur. Alors, vous avez vu l'imbrication complète. Maintenant, c'est les principes que vous allez pouvoir impliquer un peu partout. Je vous conseille vraiment de travailler votre application sous forme de modules. Parce que d'abord, c'est plus simple, ça peut être réutilisé ailleurs. C'est-à-dire que cette brique-là, vous pourriez la versionner et puis l'utiliser dans un autre projet, pour définir la configuration du titre. De la même manière, la config qu'on a là, on pourrait avoir une configuration par module, qui est importé à l'intérieur des composants de ce module. Ça, c'est pas du tout un problème, bien au contraire, je vous conseille même de faire comme ça, et d'avoir des fichiers de configuration, qui sont de la configuration de votre module. Vous avez vu un petit peu le fonctionnement des modules, j'espère que ça va vous donner des idées pour découper proprement votre code, parce que c'est vraiment ce que ça permet de faire au sein d'Angular 2, et c'est une très très bonne pratique.

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 !