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

Gérer le rendu des balises

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Pour le rendu des balises, voyez comment modifier votre application et lui ajouter un service. Apprenez également à coder un gestionnaire de référencement.
04:58

Transcription

En se basant sur la puissance d'Angular et sur le fait qu'on fasse du rendu serveur avec Angular universal, on va tout à fait pouvoir mettre en place un rendu des balises qui se trouvent dans la head pour avoir le title et la description. Alors, je vous explique un peu comment on va s'y prendre. Il va nous falloir beaucoup de choses en plus. On va se créer un seo.component. Qu'est-ce que ça va être notre seo.component ? Ça va être un composant Angular qui va se câbler sur le selector id. Comme ça, on va le remplacer nous-même. On va lui dire qu'on ne veut pas d'encapsulation, et on va lui dire que le template qui va être utilisé, ça va être le template de base qu'on avait, sauf que le title est dynamisé par interpolation. On va aller chercher title sur un objet seoModel. Du coup, la description va être récupérée sur le seoModel. Alors, tout ça, pour réussir à indexer une page très facilement. Et ça, c'est très facile parce que vous allez voir, on va le faire de façon dynamique et quand il va y avoir un rendu serveur, le moteur de recherche va pouvoir avoir des informations sur la page. Ça, ce n'est pas possible si on n'utilise pas le rendu serveur, c'est obligatoire, il faut faire du rendu serveur pour ça. Alors, ensuite, je vous montre un peu comment j'ai fait mon module seo. Je crée ici une variable seoModule, seoModel plutôt. Ici, j'ai mon constructeur où je vais injecter un service seoService, on va en parler juste après. J'ai ensuite un modèle assez classique avec un title et une description vides au début, et puis, ce que je vais faire, c'est que quand je vais recevoir depuis un événement du service seo une mise à jour, je vais mettre à jour forcément le modèle pour pouvoir utiliser les bonnes informations. Ça veut dire que mon composant seo est câblé à un service, ce service va être appelé partout où j'ai des pages, et je vais pouvoir changer dynamiquement les informations, et ça on peut imaginer même les changer par une Api enfin en faire absolument ce qu'on veut. Maintenant, il va falloir qu'on mette en place obligatoirement la suite, c'est-à-dire d'abord déclarer notre composant seo. Donc, on va le déclarer ici, on va le mettre dans le boostrap, on va le mettre dans les déclarations. On va faire la même chose sur browser, seoComponent au niveau du bootstrap et des déclarations, on n'oublie pas de l'ajouter ici. Et puis, surtout, vous allez devoir modifier ici votre index.html. Plutôt que d'avoir une head complète, on va juste mettre la balise head qui sera reconnue par Angular et transformée automatiquement. Pas besoin de toucher au serveur, tout va se faire côté client au niveau du code, attention. Après, c'est le serveur qui va forcément remplacer et modifier tout ça, et pas besoin de s'embêter. Dans shared, j'ai créé un nouveau seo.service.ts, et je vous montre ce qu'il fait, pas grand-chose. Il est injectable pour pouvoir être utilisé partout, il utilise SeoService directement avec un EventEmitter et un seoModel. Je vais ici définir un constructeur qui va simplement préparer l'event et qui va dire que c'est un EventEmitter, donc je n'oublie pas aussi de faire les imports au-dessus, et je crée un seoModel qui ne comprend pas grand-chose, un titre et une description qui sont pour le moment vides. Ensuite, j'ai un public set qui me permet d'envoyer un nouveau modèle de document, un nouveau modèle avec un titre et une description, et une fois que j'aurai envoyé, je vais lancer un événement avec la méthode emit. Elle va utiliser l'EventEmitter pour faire un emit du nouveau modèle qui sera récupéré par mon nouveau composant, mon composant seoComponent. Le seoComponent est câblé sur les événements et va mettre à jour le modèle à chaque fois que l'on va faire un set dessus. Maintenant, comment je l'utilise, parce que c'est bien joli, mais il faut l'utiliser, sur la home page, je vais avoir ici mon home.component qui va venir utiliser mon SeoService. Comment est-ce que ça fonctionne derrière ? C'est très simple, j'ai mon SeoService, je vais ici l'injecter au niveau du constructeur de ce composant-là, et je vais l'utiliser. Regardez, je vais créer un seoModel avec une description et un titre, et je vais simplement faire un set sur le service. Je vous rappelle que le set, c'est un emit. L'emit va être récupéré par le seoComponent qui va mettre à jour les balises data. Et là, on est tranquille, on a quelque chose de fonctionnel. Alors, je l'ai fait aussi sur la page about, exactement dans le même processus, dans component. On va injecter le service, utiliser un objet de description avec un titre, et puis ici faire un set sur notre SeoService pour mettre à jour les informations. En fait, ça fonctionne partout pareil. C'est exactement la même chose. Attention, votre service dans shared, il va falloir ici le définir également. Il faut forcément dire ici que vous l'importez, et puis ici le référencer au niveau des providers. Pourquoi ? Parce que dans les providers, on a différents services. Ces différents services sont utilisés pour le module shared, et ce module est utilisé également dans un autre app.node.module parce qu'on vient récupérer directement les shared pour les utiliser. Donc, il faut bien faire attention, vous voyez, il est défini ici, et il est utilisé ici et permet de mettre les dépendances dans tout le projet. Alors, faites bien ça parce que sinon ça ne va pas fonctionner. Voilà, comment on construit très rapidement un petit service qui fait fonctionner la seo. On va voir maintenant comment ça marche, est-ce que vraiment ça fonctionne ?

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 !