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