Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

Mettre une application en production avec Angular 2

Exploiter Node.js

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Node.js a permis le développement de nombreux projets et d'outils incroyables. Vous verrez qu'Angular Universal repose entièrement sur Node.js.
03:46

Transcription

Pour comprendre le fonctionnement, c'est facile. On va, maintenant que vous le savez, ouvrir le package.json qui contient des scripts qu'on va pouvoir jouer. Ça, vous êtes maintenant au fait de cette utilisation-là, c'est bien, parce que vous allez pouvoir à chaque fois regarder un petit peu ce qui se passe dans le package.json, vous comprenez un peu le fonctionnement. Alors, on n'en a pas parlé, mais il y a d'autres parties, évidemment, il y a les dépendances, il y a pas mal de choses. Alors, ici, si vous regardez les scripts qui sont mis à notre disposition, on a plusieurs choses. Alors, je vous conseillerai toujours, si vraiment vous voulez faire de l'Angular universal de partir sur le starter kit. Tout est déjà prévu, comme ça après, on adapte ce qu'on veut et on repart de ce template qui est un pur template de projet développé avec Angular universal. Alors ici, on voit qu'on a une commande start qui va faire un npm run server, et qu'est-ce que va faire le serveur ? Regardez, server, c'est nodemon dist /server/index.js. Intéressant. Il faudrait aller voir ce que c'est. Alors, pour voir ce que c'est, il va quand même falloir d'abord un build. D'abord, il faut construire. Ici, vous voyez que ce n'est pas construit. Donc, il va falloir au départ commencer la construction. Donc, on a plusieurs étapes à faire. On a un build, on a un build:prod qui nous permet de nous mettre en production, qui permettra donc d'avoir un fichier dist et avec le serveur avec toutes les informations. Donc ça, il va falloir forcément qu'on vienne le travailler parce que ce n'est pas d'origine directement dedans. Alors, vous savez déjà faire ça, on va ouvrir la console, on va aller sur le projet universal-starter. On va commencer par npm i pour faire les installations parce qu'il y a bien des dépendances comme vous pouvez le voir ici dans le projet. On a des dépendances, donc il va falloir les installer pour avoir absolument tout. Vous remarquez en plus que ça utilise WebPack, donc ça, pour nous, c'est la panacée parce qu'on peut continuer à travailler sur du WebPack, et effectivement, on voit bien que c'est ce qui est utilisé quasiment tout le temps quand on a des projets Angular qui sont fournis par la communauté. Là maintenant, on se retrouve avec les modules nodes, ce qui veut dire qu'on va commencer à pouvoir travailler. Alors, il est en train de terminer, il va faire sa petite install tranquille, et puis quand il aura fini, voilà, c'est fait, on va pouvoir commencer à faire du npm quelque chose. Alors, si je fais un npm start, le problème que je vais avoir, c'est que le npm start, il va tout me construire directement pour la production. Donc, ça veut dire que si vous faites ça, il faut faire bien attention, ça veut dire que vous prévoyez de lancer directement le serveur. Et là, regardez, qu'est-ce qui va se passer ? Il me le lance avec nodemon. Le nodemon est un gestionnaire de tâches pour nodejs. Donc, ça veut dire que concrètement c'est du nodejs. Eh oui, nodejs va nous permettre de démarrer un client et un serveur, et surtout ici, ce qui nous intéresse, c'est le serveur. Alors, vous pourrez aller regarder, c'est un serveur qui est compressé et qui est compilé, et qui est rendu disponible évidemment grâce à Angular universal, mais c'est quand même, quoi qu'il arrive, un serveur qui est en nodejs, ni plus ni moins. Vous pourrez regarder à l'intérieur de l'application, parce que c'est le dist, ce n'est point lisible. Effectivement, on aura bien ici un server.ts. Et vous remarquerez que le server.ts n'est rien d'autre qu'un serveur créé avec nodejs. Donc, on va utiliser la puissance de nodejs pour mettre en ligne un serveur sur un port particulier et surtout, c'est là que c'est intéressant, on va pouvoir faire un rendu d'application puisqu'on démarre une ngApp, donc une application Angular. On va même pouvoir donner des routes, on va même pouvoir travailler sur des fichiers que l'on va servir. Là, on est en nodejs, mais on est en train de faire de l'Angular 2. C'est la grande particularité de ce projet-là. On travaille sur serveur nodejs, ce qui est extrêmement puissant, et en plus de ça, on utilise de l'Angular 2 sur du nodejs, c'est vraiment passionnant. Alors, une fois qu'on a servi, on va aller voir un petit peu quels sont les rendus serveur et comment ça a été préparé.

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 !