Mettre une application en production avec Angular 2

Préparer le rendu serveur

Testez gratuitement nos 1266 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Pour faire un rendu serveur, vous devrez modifier le projet et des lignes de code. Vous verrez également comment préparer tous les éléments.
04:57

Transcription

La préparation d'un rendu serveur au travers d'Angular universal, ce n'est pas très compliqué en soi. Évidemment, il faut créer, forcément, on n'a pas le choix, un app.node.module, voilà, c'est comme ça que ça va fonctionner. Donc, en fait, on a un app.node.module.ts qui va s'occuper effectivement de déclarer tout ce qui doit être utilisé. Alors, vous remarquerez que c'est un peu particulier parce que ce node.module qu'on a ici, il va utiliser pas mal d'import un peu particulier, et surtout, on va utiliser la librairie Angular 2 universal, ici, node, qui va nous permettre de bénéficier d'un module Angular universal que l'on va importer. Donc c'est obligatoire, il faut importer le module sinon ça ne marchera pas. Ensuite, évidemment, c'est juste un MainModule assez simple avec quelques petites informations en plus, notamment ici on va utiliser un système de cache, et donc on va gérer du cache directement avec une string « jsonifiée ». Donc là, pour le coup, c'est assez simple à mettre en place, mais en même temps, vous êtes obligé plus ou moins de respecter ça. Donc, il vous faut forcément un app.node.module, mais également si vous regardez ici, il vous faudra forcément un composant. Alors, le node.module que l'on a là, c'est celui qui va être utilisé parce qu'après quand on va créer le serveur, on va forcément récupérer un node.module. Le node.module que l'on va avoir à récupérer, c'est celui-là, vous voyez, vous l'avez là, le MainModule, c'est celui qui sera utilisé pour faire le rendu serveur. Donc, quand vous avez créé votre node.module, eh bien, il va falloir obligatoirement aussi lui donner un composant à bootstraper. Comme pour tout module qui démarre une application Angular, on a un module composant qui est démarré et qui est le composant de base. Donc, les préparatifs sont simples. Il vous suffira de créer un petit composant très rapidement avec à l'intérieur un petit bout de template, et ce petit bout de template, vous vous en doutez, c'est ce qui va fonctionner, c'est ce qui va être rendu de base. Alors, ce qui est intéressant là-dedans, c'est que vous allez câbler les informations que vous avez à l'intérieur de vos différents modules, et notamment le routing qu'on a là. Vous allez créer par exemple un pass qui va rediriger vers quelque chose, et ici, votre module de home, par exemple, il va exposer le pass home, et il faut faire très attention parce que les routes que vous allez déclarer dans votre application, elles devront aussi être mappées, on va devoir les déclarer aussi sur le serveur. Donc, il faut que ça corresponde, qu'on ait ici sur le serveur des routes que l'on va créer, qui vont correspondre aux différents modules que l'on va avoir de l'autre côté, et ça évidemment, ça fait partie un petit peu du jeu, parce que vous devez avoir d'un côté une application qui est développée avec des routes, et de l'autre côté, une application serveur qui va mapper les différentes routes de l'application. Après, le fonctionnement est très simple. Pourquoi ? Parce qu'on va simplement sur le serveur déclarer une application Angular avec un rendu particulier, et puis des routes qui vont être mappées et ensuite on va avoir bien évidemment ici une réponse très classique et un serveur qui démarre de façon classique également. Donc, tout ça, ça va être géré automatiquement. Qu'est-ce qui fait que ça fonctionne vraiment ? Comment est-ce que c'est possible de faire fonctionner tout ça ? Eh bien, vous avez ici une app qui est en fait une application express à laquelle on va donner des informations, notamment à ngModule, et on va voir qu'ici, on va créer un engine, un moteur de rendu, qui va utiliser le MainModule de notre application, et ensuite à l'intérieur, on va lui donner des informations qu'il va pouvoir utiliser, et notamment on va lui donner le serveur Api avec l'information, on va lui donner les différentes routes. Tout ça fonctionne ensuite complètement de façon transparente parce que les modules que vous allez utiliser vont être intégrés directement, notamment ici, le enableProdMode qui va démarrer l'application en mode de production, et le MainModule qu'on a ici qui va nous permettre de travailler proprement avec express, donc bien évidemment, c'est un programme complet, c'est-à-dire que vous allez utiliser Angular universal. Angular universal, c'est vraiment construit pour fonctionner, et vous avez juste besoin de déclarer les bonnes infos, notamment les routes de vos applications, et ensuite dans votre application, créer les bons modules qui vont matcher ces différentes routes. Alors après, dans notre node module, celui qui va donc être exposé, vous verrez qu'il y a des petites choses qu'il faut respecter aussi. Notamment, il faudra insérer le routing dans le module, c'est obligatoire. Il faudra utiliser le module universal pour que ça fonctionne, il faudra bien évidemment en dessous faire des providers et leur fournir des informations importantes, et c'est ce que vous ferez tout le temps. Si vous avez un service cache, c'est bien, si vous n'en avez pas, ce n'est pas grave, mais c'est un templating que vous voyez ici sur lequel vous allez pouvoir partir. C'est exactement comme ça qu'on doit faire. Donc là, vous voyez bien le découpage. Ça n'est pas très compliqué. Donc, je récapitule rapidement, on a un server.ts qui fait donc la compilation et qui va s'occuper de servir, et on a notre node.module, notre routing et nos différents composants qui sont imbriqués les uns dans les autres et qui vont permettre le rendu serveur de votre application.

Mettre une application en production avec Angular 2

Optimisez la mise en production de votre application AngularJS. Réduisez le temps de chargement et d’affichage, gérez les tâches répétitives avec des scripts, etc.

1h05 (20 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :13 déc. 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 !