Découvrir Ember.js

Fournir un modèle

Testez gratuitement nos 1256 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Vous allez voir comment obtenir et utiliser des données provenant d'un service web, pour créer le modèle de votre route.
05:16

Transcription

L'objectif de ce chapitre va être de remplacer le code que nous avons mis ici, qui fournit tout temps les mêmes données à notre page web, à notre template par des données récupérées depuis le serveur. On va voir la façon la plus simple pour l'instant, qui sera pas forcément la façon [inaudible] de façon définitive y en a qui sont encore mieux, mais tout un petit peu complexe pour qu'on le voit maintenant. Pour l'instant, on va utiliser une React ajax standard. Pour utilisez ajax il faut injecter ce qu'on appelle un service, Ember.inject.service. Le service s'appelle ajax, mais si la propriété s'appelle aussi ajax, on va par exemple préciser le nom du service avec une virgule, pas un point-virgule. Voila, ça va me permettre de faire une requête. Ici on va faire this get ajax point request et là je vais lui donner l'URL à rechercher. Sauf que pour l'instant l'URL, je ne les vois, c'est-ce qu'on va voir tout de suite. Si vous avez déjà un serveur, qui peut vous fournir ces données-là, et c'est très bien, si vous en avez pas, j'ai un moyen pour pas que ce soit trop compliqué, ça s'appelle json-server. Donc, c'est un projet open source que vous pouvez installer avec npm , donc de même manière qu'Ember. Ça s'installe très facilement npm install - g json-server, et le principe de ce logiciel, si vous lui donnez un fichier json avec toutes les données que vous voulez fournir, et lui s'occupe de transformer sans serveur, c'est tout. Vous appelez à [ inaudible] avec le watch, ça permettra en plus que si vous modifiez le fichier, il va relancer automatiquement le serveur, le watch est obligatoire, ainsi vous voulez [inaudible] ainsi manuellement. Et donc une fois que c'est fait, ça crée un server rest qui supporte le GET, le POST, le PUT, le PATCH, le DELETE. Ça aspecte toutes les normes et ça vous permet d'avoir très rapidement un fichier avec des données. Pour ceux qui veulent aller encore plus loin, vous avez d'autres projets comme Faker qui permettent de remplir dès le début un fichier comme ça avec des données aléatoires: des noms, des prénoms, des emails, des URL d'avatars, etc. [inaudible] voulez créer tout un fichier complet remplis de données vous pouvez le faire. Nous, on va pas faire ça. Jack prépare un fichier avec quelques données trois groupes de contact et certains contacts dans ces groupes. Je vais vous montrer d'ailleurs à quoi ressemble ce fichier. Et je le fognerai dans les sources associées au cours, db.json, id ici, donc alors là il y a plusieurs contacts. J'ai utilisé notamment le logiciel de génération pour fabriquer ce fichier-là et on a trois groupes ici que j'ai rentrés moi, manuellement. Pour l'utiliser, il suffit de faire json-server db.json entrer, c'est tout. El là il me montre par exemple qu'en attaquant l'URL localhost deux points trois mille slash contacts, j'aurais tous les contacts Moi, ce que je veux de ces slash groups c'est [inaudible] de l'URL qui m'intéresse Je vais la copier, aller dans sublime et le mettre là. Une fois que j'ai fait ça, je peux retirer toutes ces lignes pour avoir quelque chose d'un petit peu plus léger. On va voir si ça marche. [ bruit de clavier] Voilà, j'ai le même résultat que tout à l'heure. Ah, je vais enlever ça [ bruit de clavier] et recharger. Donc il m'a bien chargé les éléments, alors qu'ils n'y sont plus, c'est parce qu'il les a récupérés à son savoir, si vous voullez je peux vous montrer la requête. Vous cliquez son network ici, et dans network on prend juste le xhr. El là, on voit effectivement qu'il a fait une requête dans groups, localhost groups et qui a eu comme réponse, voilà la réponse qu'il a retournée, mon server. Donc c'est bien les données que j'avais ici. Si je vais ajouter un autre groupe, je n'ai que maintenant ouvrir mon file json et le modifier. Tout ce qu'il faut dans file json, sera route inscrite dans cette page. On va pouvoir faire le même principe maintenant reprendre ça, aller dans group point js. Alors il faut d'abord que j'importe ça [ inaudible ] ajax. [ bruit de clavier d'ordinateur ] Et cette fois-ci nous allons faire un groups vers group point id égal et là j'ai fait un plus param point group. Je crois que j'ai mis un underscore, je vais juste vérifier ce que j'avais mis dans router: group underscore id, donc il faut bien respecter le paramètre qui est ici. Je vous disait quand [ inaudible] se servir de ce paramètre, ça devra être le cas ici. Alors, j'ai dû me tromper, c'est la forme de ma requête pour filtrer ce qu'il nous a tous retourné. C'est parce que je voulais... Effectivement, j'ai fait une erreur, ce qu'il me faut ici, c'est pas déjà, le format, ça va être plutôt ça. Le problème en reste ce que si vous utilisez ce jar de format, là, ça aurait marché [inaudible] uniquement le groupe que je voulais, mais dans une liste d'un élément. Pas besoin de faire une inqiery, je mets slash, dans groups je demande le numéro group id, et là ça devait marcher. Donc, j'ai le deux, effectivement vous voyez, on va bien antamer l'objet id deux amis. Donc cette fois-ci vous voyez, si je charge l'URL trois il m'a bien mis travail. Je peux revenir en cliquant sur le lien ou en rechargeant la page. Cette fois-ci on a quelque chose de fonctionnel qui passe par un serveur. Et si vous faites des modifications côté serveur bien évidemment ça marchera côté application et site web directement.

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 !