Découvrir Ember.js

Installer un add-on et Bootstrap

Testez gratuitement nos 1252 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Installez un add-on externe en utilisant Ember CLI. Cet add-on va installer la librairie de mise en page, Twitter Bootstrap.
04:04

Transcription

Nous allons voir dans ce chapitre comment utiliser un Addons. Un Addons, c'est une librairie extérieure Ember, compatible avec Ember, qui va pouvoir insérer dans votre projet du code que ce soit du CSS, des composants, des routes, de tout, tout ce que vous pouvez faire, vous, peut être ajouté via des Addons. Donc vous pouvez même créer vos propres Addons, si vous souhaitez créer, par exemple, des librairies réutilisable. Mais sachez qu'il existe toute une base de données sur Internet, avec plusieurs dizaines, plusieurs centaines même d'Addons, La plupart, c'est open source et vous permet d'agrémenter votre application sans avoir à agrémenter [ inaudible ] à chaque fois. Par exemple, si vous souhaiter utiliser Bootstrap, Bootstrap, c'est une librairie éditée par Twitter qui est open source vous permmetant de mettre en page beaucoup plus facilement vos sites Web, donc, il y a des composants réutilisables pour gérer des menus, surtout ce qui m'intéresse le plus et moins c'est le système de Grid pour faire la mise en page de votre application, et la notion de Responsive Design, puisque quand vous utilisez ce système de Grid, il va être capable de s'adapter automatiquement à des versions mobiles ou tablettes, avec plusieurs règles simples à mettre en place. Pour utiliser Bootstrap, le pluis simple, c'est de rechercher s'il existe pas un Addons qui l'utilise. Effectivement, il y en a un, ember-bootstrap, Alors, en plus ce site Ember Observer c'est pas forcément un site officiel, mais il est très bien fait, parce qu'il va chercher en tous les projets open source, il va attribuer une note à chacun des éléments. La note, elle est basée sur plusieurs choses. Il y a cinq points qui sont basés sur une évaluation par des personnes. Mais en plus de ça, il y a tout le côté succès et suivi de l'Addons, à savoir est-ce qu'il a été mis à jour récemment, est-ce qu'il y a une release qui a été sortie y a au moins trois mois, est-ce qu'il y a plus d'une personne qui contribue ce Github, est-ce qu'il y a beaucoup de téléchargements, etc, etc. Et c'est souvent d'indicateurs intéressants, lorsqu'alors le dix c'est le maximum qu'on puisse avoir. Donc, celui-ci vous pouvez y aller et de refermer, il est tente-huitième sur le top cent, et vous avez vu qu'il en existe plusieurs centaines des Addons sur ce site Donc celui-ci, on peut l'installer sans problème. On peut voir minimum d'explications et le mieux c'est d'aller voir carrément le lien vers Github pour avoir les explications sur comment se servir de cet Addons. Alors, justement pour installer un Addons sur Ember, c'est très simple. Vous allez dans votre ligne de commandes, on va arrêter le server pour faire ça, au lieu de faire ember serv ou ember generate qu'on a vu jusqu'à présent, on va faire ember install. Install, ça va télécharger l'Addons, l'insérer dans votre projet, télécharger éventuellement les dépendances qu'il pourrait avoir avec, donc mpm ou autre, et même si l'Addons fournit un script de départ il va l'exécuter automatiquement pour vous. Donc j'appuie sur entrer et j'installe cet Addons. Il installe, vous voyez, toutes les dépendances de mpm. Dans ce contexte-là il a besoin de télécharger Bootstrap. Et voilà, tout est installé, il a vraiment tout préparé pour moi, je peux relancer mon server. Et maintenant, j'ai la plupart des sites Bootstrap qui seront disponible dans mon application. Au niveau de mon projet, je vais quand même vous montrer ce que ça a fait. Dans les pages, rien a changé, ce qui a été modifié, ça va être dans ce fichier. Voilà, là, il a ajouté dans le fichier package.json la dépendance vers ember-bootstrap en version 0.6.2 donc qu'il est allé voir sur le site qui était en version actuelle. Moi, je juste dis install ember bootstrap, c'est lui qui est allé voir, qui a regardez la dernière release, c'était la 0.6.2, il a ajouté cette release dans mon fichier et ensuite, il a installé le tout. C'est la seule chose que vous devez voir certain ajout des dépendances dans une autre gestion de dépendances qui est bower [ inaudible ], voilà. Il a lui-même ajouté bootstrap 3.3.5 dans le fichier bower. Donc, package.json, c'est là où vous aurez vos dépendances mpm, et dans bower.json, c'est là que vous aurez vos dépendances pour bower. Donc ce sont deux gestionnaires de paquets séparés, Il y a [ inaudible ] qu'il ne faut surtout pas touchés qui sont intégrés avec le projet ember. Et vous pouvez après ajouter vos propres dépendances, si vous souhaitez, par la suite. Voilà tout ce qui était fait. Nous allons voir dans le prochain chapitre commen utiliser Bootstrap pour mettre un petit peu en page notre site. Même si le cours ne s'adresse pas à l'utilisation de Bootstrap, on va juste faire un minimum pour que notre site ressemble à quelque chose de sympa.

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 !