Découvrir Ember.js

Comprendre les bases d'Ember.js

Testez gratuitement nos 1330 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Entrez dans le vif du sujet avec les concepts fondamentaux d'Ember.js. Découvrez ce que sont les routes et les templates et leurs rôles respectifs.
04:23

Transcription

Avant de rentrer dans le code, il faut comprendre les fondamentaux d'Ember. Si vous arrivez à bien saisir les notions de « route » et de « template », vous devriez assimiler très rapidement les concepts. Le premier point est basé sur l'URL. Peut importe la base de l'URL. Là, on est sur localhost. Le plus important c'est la fin, ce que j'ai mis en italique : /groups. Cela veut dire que vous êtes sur la route « groups ». C'est vous qui définirez les différentes URLs possibles et donc les différentes routes possibles. Et par défaut, le nom de l'URL correspond au nom de la route. Vous aurez un objet « route » qui va gérer ce chemin-là. Sa tâche principale est de charger le modèle, c'est-à-dire les données qui devront être affichées pour cette page-là. On peut soit les charger en local, si vous avez des données en dur ou un tableau de données non-variable, et les rentrer directement dans votre classe « route » ou alors les charger depuis un Web service, voire un serveur externe qui vous retourne les données de groupe. Le « modèle », ce sont donc les données à afficher. Une fois qu'il a ce modèle, il va le fournir au template. Le template, c'est l'équivalent de ce que vous aviez avant en html, sauf qu'on ajoute en plus les handlebars. Ça va être du html standard, et on va pouvoir insérer au milieu des données, notamment les données du modèle puisque la route nous fournit les données qu'elle a chargées depuis internet ou un fichier, peu importe. On va pouvoir insérer ces données dans le html. Si vous avez déjà fait du html côté serveur, en ruby ou en php par exemple, peu importe le langage, où vous preniez du html et insériez à l'intérieur les données, si vous fabriquiez du html pour une liste par exemple et que vous envoyiez un fichier html terminé au client, c'est le même principe, sauf que c'est le client qui va modifier son html pour insérer les données via la syntaxe handlebars. Pour rendre le code plus modulaire, depuis quelques années, on utilise quasiment 100 % de composants dans les templates, c'est-à-dire qu'au lieu de mettre directement du code html dans votre template de la page « groups », vous allez créer des composants pour chaque sous-fonctionnalité de la page et essayer de découper votre code en petits composants indépendants qui ont chacun une tâche très simple à réaliser. Un composant, c'est à la fois un template en interne et un mini contrôleur qui fournit les données à son template. On le verra en détails plus tard. Comment cela fonctionne dans Ember CLI et dans un projet concret ? Je vais essayer de laisser cet onglet ouvert pour ne pas arrêter ce serveur Web qui fournit la page standard. Je vais ouvrir un autre onglet en le laissant ouvert vérifier que je suis bien dans le même projet et pour faire ma route « groups », je vais faire « ember generate route » car c'est une route que je veux générer, et je vais l'appeler « groups », sans me tromper sur l'orthographe car tout va être nommé de la même manière. J'appuie sur « entrée ». Il a automatiquement créé plusieurs fichiers et a même modifié des fichiers existants. Dans le dossier « app », dans le sous-dossier « route », il a ajouté « groups.js ». Ensuite dans le dossier « app », dans le sous-dossier « templates », il a ajouté « groups.hbs », « hbs » désignant les handlebars. Il a aussi modifié le fichier « routeur.js » pour indiquer que l'on acceptait maintenant cette route-là. Et il a ajouté un test automatique que l'on verra plus tard. Voyons à quoi ressemblent ces fichiers dans Sublime Text. Le premier, c'est le fichier routeur qu'il a modifié, et qui existait déjà : il a ajouté cette ligne dedans. Notre application accepte maintenant la route « groups ». Si je vais dans « route », on voit qu'il a ajouté « groups.js » qui pour l'instant ne fait rien, un template dans « templates » et « groups.hbs »qui est ici. Pour l'instant, il n'y a qu'un outlet dedans. On verra plus tard ce que cela veut dire. Pour chaque URL, vous aurez des fichiers séparés. C'est le gros avantage de Ember CLI, de cette gestion sous forme de projet avec de multiples fichiers. Il va répartir la gestion de chaque page dans des fichiers bien précis. Dès que vous avez des modifications à faire, vous trouverez rapidement le fichier à gérer. Et souvent, chaque fichier aura très peu de lignes de codes, ce qui rend les choses plus gérables et plus simples à développer.

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 !