Mettre une application en production avec Angular 2

Choisir les parties à rendre

Testez gratuitement nos 1302 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Uniquement quelques parties du projet seront rendues. Choisissez avec pertinence celles qui seront mises en avant.
03:45

Transcription

Bien entendu, c'est à vous de choisir ce que vous voulez faire comme rendu. Là, si on regarde l'application de démo que l'on va utiliser, on voit bien que le rendu qui va être fait, ce sera le template de base. Pensez bien à ça, c'est le premier composant, et le premier module que vous allez démarrer, donc ce qui va se trouver sur / en réalité, qui va être servi par le serveur, et c'est ce rendu qui va être fait. Après, tout ce que vous aurez derrière évidemment, il y aura une demande au serveur qui va récupérer la partie, la compiler et la renvoyer. Le serveur, en fait, va s'occuper de faire les rendus, mais la première partie à rendre, c'est celle que vous avez là. On va s'occuper de ce petit rendu. On va faire ici un npm. Alors, on a la possibilité de faire pas mal de choses, mais pour le coup, on va faire un build de npm, c'est ce que l'on avait fait, donc là, on a les bonnes infos, et ensuite on va faire un npm start, ce qui va nous permettre de démarrer réellement, donc de démarrer le serveur. Quand vous allez démarrer le serveur, vous allez vous rendre sur une URL. On va aller regarder le code source qui est généré parce que ce code source est très intéressant pour nous, c'est ce qui nous permet de voir effectivement que l'on n'a pas tout qui est rendu, mais seulement une partie. Alors, je m'explique. Regardez, ici, vous allez simplement faire un reload de la page parce que c'est important d'avoir les informations. Vous allez ouvrir la console de développeur et vous allez regarder ici, le home. Le home, c'est la page de base qui va être rendue. Alors, cette page de base, elle va correspondre à quoi en réalité dans le projet ? Parce que forcément, cette page de base, ce n'est pas ça, ce n'est pas ce que l'on a là. Non, cette page de base, c'est ça. C'est l'index.html qu'on a ici qui va être lu, plus le rendu de l'application. Et c'est là, où ça devient intéressant, parce que quand vous allez charger une vraie application Angular sans utiliser Angular universal. Ici, vous n'allez pas avoir tout ça. Ici, vous allez avoir la balise app avec effectivement l'attente, mais vous n'allez pas avoir l'information rendue directement par le serveur, alors qu'ici ce qui est renvoyé directement par le serveur au client, c'est tout de suite cette partie-là qui est déjà compilée, et vous voyez qu'ici, c'est exactement ce qu'on a choisi, c'est-à-dire c'est le premier composant qu'on a inséré et le templating du premier composant qui est rendu directement. Alors, vous pouvez choisir ce que vous voulez. Ça peut être intéressant aussi, pourquoi pas, sur les parties qui sont à charger, de travailler avec Angular et de faire en sorte, par exemple, on pourrait avoir la page de base alors, on va prendre le composant app. Ici, on pourrait avoir une balise qui serait rendue, pourquoi pas, et qui va chercher des informations. On pensera bien, à cet endroit-là, à mettre un loader qui permet d'attendre, et donc on aura le rendu de l'application complète, c'est-à-dire de ce que l'on a demandé déjà à l'utilisateur, plus les CSS, etc., sans attendre qu'Angular ait terminé de compiler et que le navigateur ait terminé de compiler, et le reste, on mettra des loaders en place pour que ces parties-là soient ensuite rafraîchies, mais plus tard. Ça vous permettra de mettre en évidence certains éléments, et surtout les gens sont habitués à ça, c'est-à-dire qu'on est très habitué à voir une interface apparaître et ensuite à avoir des informations qui chargent. C'est beaucoup moins choquant que d'avoir une page blanche où on attend qu'une application s'affiche, parce que là on a l'impression que ça ne marche pas. Donc, quand vous allez avoir une application à développer où vous avez besoin d'afficher d'abord de l'info, vous allez utiliser Angular universal pour créer votre application parce que ça permettra d'afficher à l'utilisateur de l'information, notamment ici, c'est toute cette partie, donc après vous choisirez ce que vous voulez. Partez simplement d'un principe que c'est le premier composant qui va définir ce qui sera chargé dans la page au démarrage, et ça vous permettra d'avoir une application qui est chargée directement, et ça l'utilisateur, il aime bien. Il y a des statistiques qui indiquent que si au bout de deux secondes une page ne s'est pas affichée, on n'a rien à l'écran, les gens s'en vont, donc, il faut vraiment que dès le départ il y ait quelque chose, c'est grâce à Angular universal que vous allez pouvoir faire ça.

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 !