Découvrir Ember.js

Définir les routes et le routeur

Testez gratuitement nos 1324 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Comprenez le fonctionnement du routeur. Ce fichier définit l'ensemble des routes de votre application.
05:56

Transcription

La notion même de route débute dans le routeur. Ce fichier « routeur.js » est disponible à la racine du sous-dossier application. On a les routes ici. Si on ferme tous les dossiers dans « app », on a quelques fichier en bas, notamment « routeur.js ». Je clique deux fois pour l'avoir ici. Ce fichier est relativement standard. C'est cette partie-là qui m'intéresse. C'est ici que vous allez déclarer vos routes. Pour chaque route, vous aurez une ligne de la même forme que celle-ci. Nous ne l'avons jamais ajoutée nous-mêmes, elle a été ajoutée quand on a généré la route. On a vu l'exemple d'une route simple. Je vais vous montrer une route imbriquée. Si on souhaite, en cliquant sur un de ces liens, pouvoir naviguer vers le groupe lui-même, il va falloir une autre route. La route « groups » regroupe la liste de tous les groupes. Si je veux voir un groupe en particulier, il faudrait que j'ai une nouvelle URL du type « groups/1 » pour le groupe 1, « groups/2 » pour le groupe 2 ou « groups/3 » pour le groupe 3. Pour cela, il faut prévenir le routeur qu'on a une nouvelle route possible. Au lieu de le faire à la main, on va utiliser notre générateur. Je vais aller dans le terminal. On avait utilisé « ember generate route groups ». Je vais ajouter « /'group » à la fin. La route qu'on va ajouter n'est pas une route parallèle à « groups » mais une sous-route qui s'ajoute après « groups ». J'appuie sur « entrée ». Il a créé deux fichiers : un .js pour la route et un .hbs pour le template. Il a modifié notre fichier routeur pour intégrer les changements. Retournons voir ce fichier. Il a ajouté non pas une nouvelle ligne en-dessous, car ce n'est pas une route parallèle, mais à l'intérieur de la fonction « groups » qui était vide jusqu'à présent, une nouvelle route, la route « group ». Si je vais maintenant dans Chrome et que je tape « /group », il a dû changer la route. Voyons dans l'inspecteur. On recharge la page une fois que l'inspecteur est ouvert. On a effectivement notre route « application », la route « groups » et « groups.group ». Retenez le nom de l'annotation, c'est important. Dans les routes imbriquées, on ne garde pas que le nom de la fin mais on inclut également les parents. « groups.group », c'est le nom entier de cette route. Les fichiers qui vont gérer cette route sont dans « template » et dans « route ». Cette fois, au lieu de le mettre ici, il a créé un dossier « groups » qui correspond à la route parent et a mis « group.js » dedans. Pareil pour le template : « group.hbs ». Ici, on va encore laisser cet « outlet ». Vous allez bientôt savoir à quoi il sert. Je tape : « Voici un groupe ». On a donc « Welcome to EmberJS », la liste des groupes et « Voici un groupe » mais si j'enlève la fin de l'URL, vous voyez qu'il manque la fin. C'est là qu'on va commencer à parler du principe de cet « outlet ». Il y a deux choses à voir : la première, c'est la route « application ». Jusqu'ici, on ne s'en préoccupait pas. Il faut savoir que dès que vous créez une application vous avez une première route, le « / » vide qui correspond à la route « application ». Cette route est gérée par un template. Dans ce template, il y a « application.hbs » où se trouve le « Welcome to EmberJS ». On va l'écrire plutôt comme ça. Voilà. Pour la route « application » aucun fichier « application.js » n'est fourni. On peut le fournir en cas de besoin particulier. En général, on n'a pas de modèle à la racine, donc il n'est pas généré par défaut mais on peut l'ajouter si besoin. Voilà la première route. Ensuite, on avait la route « groups » et derrière, la route « group ». Quand on a un chemin avec plusieurs routes à la suite, il va d'abord rendre la première. Si il y trouve un outlet, il va rendre les suivantes dans l'outlet. On est sur la route « application ». Je vais les mettre de gauche à droite. « group » doit être au milieu. Il manque « groups.hbs ». On pourrait symboliser les premier, deuxième et troisième composants par ces trois onglets. Il va d'abord rendre cette page-là. Puis dans l'outlet, il va rendre la route suivante, c'est-à-dire « groups » et définir lui-même un outlet ici pour rendre le contenu de la route suivante s'il y en a une. C'est le cas ici, et si on avait autre chose après « group », cela se mettrait dans cet outlet-là. Si je vais dans mon inspecteur, que je passe ma souris sur « View Tree », on voit que « application » c'est le tout, que « groups » c'est le premier outlet qu'on avait vu dans « application.hbs » et ici le dernier outlet qui est dans « groups.hbs » . Il y en a un autre dans « groups.hbs » mais comme on n'a pas d'autres routes affichées, il n'est pas rendu à l'écran. Si je veux créer un lien entre ces groupes, je peux le faire ici par exemple. Il ne le propose pas. Nous allons utiliser un module « link-to » qui permet de générer un lien vers une route. Le nom de la route sera « groups.group ». Et je vais fermer mon « link-to ». On enregistre. Puis on retourne dans Ember. Maintenant, ce sont des liens. Pas trop d'intérêt pour l'instant, car ce ne sont pas des groupes dynamiques mais on voit que cela a été transformé en liens et je ne sais pas si vous voyez le lien en bas quand je passe la souris mais dès que je clique, je suis renvoyé vers « groups ». Voilà le principe. Voyons maintenant les routes dynamiques.

Découvrir Ember.js

Créez vos composants et mettez en page vos sites avec une facilité déconcertante avec Ember.js. Apprenez à créer des routes et à charger vos modèles depuis un service web externe.

2h57 (37 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :31 mars 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 !