Angular 2 : Dynamisation des applications

Configurer un module parent

Testez gratuitement nos 1268 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Le module parent vous permet de définir les grandes lignes de votre application. Apprenez à le configurer.
04:57

Transcription

Pour que vous compreniez bien ce qui est en train de se passer, et comment notre module actuel fonctionne, je vais vous montrer de A à Z le fonctionnement actuel et l'implémentation actuelle. Alors on utilise ici un import de systemjs.config.js, qui lui va nous permettre de définir quel est le module parent, le module principal à charger. Ensuite, via son système d'import, on va lui demander de faire un import de l'application. Ce qui fait que ça va fonctionner tout seul ensuite, c'est-à-dire que ce tag-là, my app, sera disponible, sur notre application et nous permettra de travailler avec le module parent. On a donc défini un module parent. Dans le systemjs.config, vous remarquerez qu'effectivement, ici dans les packages, j'ai bien le app qui est défini, et ce app va aller charger le main.js. Le main.js, c'est le démarrage de toute notre application, c'est vraiment le point d'entrée. Ensuite, dans main.ts, qu'est-ce qu'on a ? On a ici un import de platformBrowserDynamic, c'est assez classique, c'est comme ça que ça fonctionne, c'est celui qui va nous permettre ce module de bootstrapper l'application. Et ensuite on a ici AppModule, qui est notre module parent, qui a été importé. Dans platformBrowserDynamic, on utilise la fonction bootstrapModule qui nous permet de passer un module, module parent, pour démarrer l'application. Donc, de toute façon, quoi qu'il arrive, vous aurez toujours un module parent dans votre application, pourquoi ? Parce que c'est le module principal qui permet de faire tout fonctionner. Le AppModule, qu'est-ce que c'est ? Eh bien, c'est ça. C'est ni plus ni moins qu'un module parent qui va définir les grandes lignes, donc concrètement pour nous, qu'est-ce que ça vient définir ? Ça vient définir qu'on utilise ici ngModule, qui va nous permettre ici d'avoir une annotation, et donc d'avoir de la metadata sur notre module. BrowserModule, utile parce qu'on en a besoin, au sein de notre application pour la faire fonctionner. FormsModule, moi j'en ai besoin pour les formulaires, c'est ce qui me permet de contrôler les formulaires, de contrôler les erreurs, etc. Celui-ci n'est pas obligatoire au départ, mais vous en aurez peut-être besoin. Import, donc ici on importe l'AppComponent, ça c'est obligatoire parce qu'on en a besoin. Et puis derrière, je viens importer d'autres choses dont on parlera un petit peu plus tard. Je reviendrai sur les directives, sur leurs organisations, et sur ce qu'on peut faire avec. Moi, j'aime bien ne pas mettre d'espaces ici, mais bon, la convention, c'est les espaces, vous faites ce que vous voulez, je trouve ça plus clair comme ça, personnellement, c'est vous qui voyez. Donc là, simplement, gardez en tête que je viens ajouter d'autres éléments une pipe, des formulaires, et puis un composant particulier que je vais réutiliser. Celui qui nous intéresse nous, c'est le AppComponent. Pourquoi ? Parce que AppComponent, c'est notre module principal. On est obligé de le faire à deux endroits. On est obligé dans les déclarations de venir importer tout ce qu'on va utiliser qui dépend du domaine de notre AppModule. Et ça, gardez-le bien en tête, parce que concrètement, ça, vous le ferez à chaque fois que vous avez un nouveau module. Le module va définir ses propres composants en fait, et ses propres utilisations. On doit se définir les propres utilisations par des déclarations. Donc on vient déclarer ce qui va être disponible dans ce module. Les imports permettent juste de faire fonctionner le module avec ce dont on a besoin, donc si vous avez du formulaire, il faut utiliser le FormsModule, si vous voulez faire des rendus de vue comme ça dans le navigateur, il faut utiliser BrowserModule, etc. Et enfin ici, nous sur ce NgModule là, ce ne sera pas le cas à chaque fois, on a un bootstrap. Bootstrap permet de dire dans tout ce que j'ai déclaré quel est celui qui va être à charger. En l'occurrence, celui qui va être à charger pour nous, ça va être le AppComponent. C'est lui qui va tout démarrer, ça va être notre composant par défaut. On pourrait en avoir un autre sans aucun problème, mais c'est celui-ci qui va tout démarrer. Au AppComponent, maintenant. C'est simplement un composant, ni plus, ni moins, qui définit ce fameux my app qu'on va pouvoir utiliser avec un template, etc, et ensuite, qui a de la logique applicative. Donc voyez que ça, ça nous permet de définir un composant qui va être bootstrappé dans le module, et qui va être défini en tant que bootstrap, qui va être déclaré, il va falloir les injecter, il va falloir les récupérer. Et enfin, on définit le AppModule, qui sera utilisé dans main.ts, pour démarrer l'application sur l'index.html. Alors, le module parent, ça sera plus ou moins toujours la même chose, donc gardez bien ce code de côté, parce qu'en fait concrètement, ça va toujours fonctionner comme ça, on est obligé de faire ça. Ça nous permet maintenant d'avoir de la modularité et plus loin que ça, ça nous permet aussi d'utiliser le ahead-of-time, c'est-à-dire la compilation live de notre code, qui a permis de faire des gains de performance assez impressionnants, entre la dernière release candidate et cette version finale. Donc pour le coup, c'est vraiment une très bonne chose pour nous. Et surtout maintenant, on parle de vraie modularité donc on définit des modules avec des applications bien particulières. On pourrait avoir un module home, par exemple, qui serait utilisé quelque part et qui nous permettrait d'avoir des bouts de template, et de la logique et de l'information à l'intérieur de ce module. Vraiment, on modularise proprement une application avec ce NgModule.

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 !