Découvrir Ember.js

Préparer son projet

Testez gratuitement nos 1271 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Créez votre premier projet d'application en utilisant Ember CLI. Il s'agit de l'interface de commande qui automatise la plupart des tâches complexes et récurrentes.
04:54

Transcription

Maintenant que nos outils sont prêts nous allons essayer de créer notre projet en utilisant l'interface de Ember CLI. Pour savoir ce que nous propose Ember CLI il suffit de taper Ember et un menu de documentation s'affiche. Donc on a plusieurs commandes, dont on verra la plupart pendant ce cours. Évidemment si vous voulez plus de documentation sur le site d'Ember CLI vous avez tout le guide utilisateur, c'est en anglais je vous avais prévenu tout est en anglais au niveau d'Ember. Qui est très complet, qui vous explique comment utiliser vos ressources etc. Même sinon on va le voir ensemble si vous avez besoin d'aller plus loin vous avez toute l'expliquer et surtout si c'est mis à jour entre-temps. La commande que nous on va utiliser ça va être Ember New et le nom de votre site. Ici ce qui est vraiment important à retenir, c'est qu'autant pour installer node [inaudible] mettre où vous voulez en terme de dossier autant maintenant il faut se placer dans le dossier où vous voudrais sauvegarder votre fichier. Ça c'est mon dossier personnel, qui est le dossier principal dans lequel j'ai sauvegardé mon projet. Donc je vais faire Ember New et on va l'appeler « address-book ». J'appuie sur Entrée. Il a créé tout un tas de dossier pour moi. Là il est en train d'installer plusieurs paquets GVNPM. Ensuite il devra uninstaller certain via Bower, qui a une autre gestion indépendance. Et une fois qu'il aura terminé je pourrais commencer utiliser mes sources. On voit qu'il a déjà généré pas mal de fichiers js pour moi, de fichiers HTML. Et donc on va les voir ensemble une fois qu'il aura terminé cette installation. Voilà tout est prêt, il a tout installé. Il nous suffit d'ouvrir les sources d'un sublime texte. pour voir un petit peu où est-ce qu'on est. Alors on peut le faire avec le cliqué, droit, ouvrir en fait une procédure standarte, mais avec sublime texte. Et en raccourci « subl » et je vais lui donner le nom de mon dossier. Donc c'est « address-book » Entrée. Et automatiquement sublime texte m'a ouvert tout le projet avec tous les fichiers présents. Tout ça sont des fichiers qui ont été générés par Ember. Pour instant on va pas trop s'en préoccuper. On va rader la structure générale pour essayer de comprendre ce qui va se passer. Alors quels sont les fichiers dont vous devez vous préoccuper pour le moment. Le premier fichier important se trouve dans « config » « environnement ». Ici vous allez pouvoir mettre vos réglages principaux liés à Ember c'est-à-dire L'URL par exemple de votre serveur web, si vous en avez un. Donc le fichier « environnement.js » vous permet de sauvegarder des réglages un petit peu des constantes que vous pourrez après utiliser en tous vos fichiers Java Script. Ce qui est intéressant à voir avec ce fichier c'est que vous avez 3 environnements possibles, soit de développement, de test ou de production. Vos constantes, vous allez pouvoir les modifier en fonction de l'environnement. Je prends un exemple, si vous utilisez l'adresse d'un service web pour communiquer avec votre serveur et récupérer les données d'un service web vous pourrez mettre en développement l'adresse d'un serveur local de test et en production l'adresse d'un serveur réel. Vous n'aurez du coup plus jamais à faire vous-même le changement avant de [inaudible] les sources. Quand vous serez en train de faire des tests en local il sera toujours au cerveau local. Et dès que vous compilerez avec Ember pour la production, on verra à la fin ce que ça veut dire, il va automatiquement remplacer toutes les variables de développement par celles de production. Donc ça paraît vraiment de ne pas avoir à faire des choses de spéciale avant d'envoyer en ligne vous prévoyez tout dès le début et c'est Ember qui vous permet de gérer soit le mode dev, soit le mode production au quotidien. Le dossier « app » c'est la dedans que vous aurez tout votre contenu. On a par exemple le fichier « index.html » qu'on ne touchera jamais. Normalement vous n'avez rien à mettre dans ce fichier. Voici à quoi il ressemble et tous ces éléments avec tout rappel des handlebars seront remplacer par Ember par le contenu réel. Le contenu réel, on le replira dans chacun de ces sous-dossiers, on verra plus tard à quoi ils correspondent. Mais pour nous le plus important c'est de comprendre que la plupart de vos modifications seront dans ce sous-dossier « app », qui est ici. Maintenant que notre dossier est prêt je vais uniquement ajouter dans sublime texte quelques modules qui vont me servir à vraiment gérer des handlebars un petit peu plus facilement. Pour faire apparaître l'ensemble des commandes de sublime texte vous avez raccourci qui est commande, shift P, ça fait apparaître les commandes et vous pouvez commencer à taper pour filtrer les commandes en fonction du texte que vous écrivez. Une des commandes qui va m'interesser à moi ça va être lier à package control. Package control c'est un plugin supplémentaire que j'avais déjà installé sur sublime text que vous pouvez installer gratuitement qui va permettre d'ajouter d'autre plugin facilement sur ce sublime texte. Parce que si vous avez pas ce package control vous devrez arrêter charger le fichier, mettre les dossiers au bon endroit d'un sublime texte. c'est [inaudible] refaire la procédure, alors que package control son boulot justement c'est télécharger, de mettre à jour les différents plugins. Donc, moi je vais ajouter un nouveau package, « installe package ». Là il cherche d'internet la liste des packages dissponibles et je vais taper handlebars. Voilà handlebars c'est le premier qui m'intéresse, ça va permettre de gérer les fichiers HBS. Donc là, lorsque vous ouvrirez des fichiers HBS, vous ouvrez la mise en page vous avez plusieurs raccourcis aussi que l'on verra plus tard pour utiliser ce fichier HBS de mise en page.

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 !