TP Node.js/express/mongodb/AngularJS REST / AngularJS
Transcription
TP Node.js/express/mongodb/AngularJS REST / AngularJS
TP Node.js/express/mongodb/AngularJS REST / AngularJS Eric Ramat [email protected] 28 juin 2016 Durée : 12 heures L’objectif de ce TP est d’utiliser une API REST au sein d’applications AngularJS. L’idée est d’offrir toutes les fonctions de gestion des utilisateurs, d’un ensemble de cartes Pokémon et d’un desk. Pour la définition des librairies à utiliser côté client, utilisez l’outil bower. { " name " : " open - pokemon - client " , " directory " : " app / bower_components " , " version " : " 0.0.1 " , " ignore " : [ " **/.* " , " node_modules " , " bower_components " ], " dependencies " : { " angular " : " ~1.5.0 " , " angular - bootstrap " : " ~1.2.0 " , " bootstrap " : " ~3.3.6 " , " jquery " : " ~2.2.0 " }, " resolutions " : { " angular " : " ~1.5.0 " , " jquery " : " ~2.2.0 " } } L’installation des librairies se fait à l’aide de la commande : bower install 1 Travail Question 1. Créer une vue avec la liste de tous les pokémons disponibles. Chaque pokémon est présenté avec son nom, son expansion, son numéro et une petite image (la carte). La largeur de l’image est limitée à 64 pixels. 1 La liste est présentée sous forme d’une table. Utilisez Bootstrap et la classe table. Attention, il faut utiliser la librairie angular-bootstrap. Pour que le serveur puisse marcher, il faut disposer d’un serveur. L’une des possibilités est d’utiliser gulp et le module gulp-connect. Ces deux modules sont des modules node.js. Vous pouvez les installer à l’aide de node.js via package.json. Bower peut aussi être installé par cette méthode. Question 2. Le nombre de pokémons étant relativement élevé, utilisez la librairie angular-utilspagination et la directive dir-pagination pour introduire la notion de pagination. Chaque page est limitée à 10 pokémons. Question 3. A partir de la liste des pokémons et en cliquant sur le nom, une nouvelle vue apparaît avec la description complète de la carte. Question 4. Ajoutez un menu à l’aide Bootstrap. Pour l’instant, seuls trois éléments sont disponibles : home, cards et deck. Lors du clic sur Home, une page d’accueil vide apparaît. Pour Cards, la liste des pokémons est proposée. Le dernier lien donne accès au deck rattaché à l’utilisateur identifié. Pour le moment, la vue est vide. Question 5. Définisez une vue pour la connexion des utilisateurs. Pour tester, ajoutez un utilisateur dans la base de données. Lors de la validation du formulaire, le login et le mot de passe sont vérifiés sur le serveur. Si l’utilisateur est valide alors la vue Deck est accessible. La fonction d’identification doit être développée dans une factory. Attention, il faut garder la trace de l’utilisateur connecté. Question 6. Définissez la vue de définition d’un deck. Toutes les cartes sont présentées selon une grille et sur une seule page. Si l’utilisateur clique sur une carte, la carte fait parti du deck. Si la carte fait déjà parti du deck alors la carte est retirée du deck. A chaque événement, la base de données est mise à jour. Si le deck n’existe pas alors il est créé dès que l’utilisateur a sélectionné une carte. Affichez un élément graphique de votre choix pour montrer que la carte est dans le deck. Question 7. Ajoutez les librairies angular-gettext et angular-i18n pour introduire le multilingue. 2