TD n°2

1. Créer un module et un contrôleur
2. Utiliser des directives Angular
3. Mettre en oeuvre le Data-binding

1. Lister les produits disponibles
2. Ajouter un ou plusieurs produits disponibles aux produits sélectionnés
3. Ajouter tous les produits disponibles aux produits sélectionnés
4. Retirer un ou plusieurs produits sélectionnés
5. Retirer tous les produits sélectionnés
6. Valider le choix de produits sélectionnés
7. Revenir au choix des produits

dispoItems : à intégrer dans le contrôleur

[
	{
		url: 'http://tutorialzine.com/2013/07/50-must-have-plugins-for-extending-twitter-bootstrap/',
		title: '50 Must-have plugins for extending Twitter Bootstrap',
		image: 'http://cdn.tutorialzine.com/wp-content/uploads/2013/07/featured_4-100x100.jpg'
	},
	{
		url: 'http://tutorialzine.com/2013/08/simple-registration-system-php-mysql/',
		title: 'Making a Super Simple Registration System With PHP and MySQL',
		image: 'http://cdn.tutorialzine.com/wp-content/uploads/2013/08/simple_registration_system-100x100.jpg'
	},
	{
		url: 'http://tutorialzine.com/2013/08/slideout-footer-css/',
		title: 'Create a slide-out footer with this neat z-index trick',
		image: 'http://cdn.tutorialzine.com/wp-content/uploads/2013/08/slide-out-footer-100x100.jpg'
	},
	{
		url: 'http://tutorialzine.com/2013/06/digital-clock/',
		title: 'How to Make a Digital Clock with jQuery and CSS3',
		image: 'http://cdn.tutorialzine.com/wp-content/uploads/2013/06/digital_clock-100x100.jpg'
	},
	{
		url: 'http://tutorialzine.com/2013/05/diagonal-fade-gallery/',
		title: 'Smooth Diagonal Fade Gallery with CSS3 Transitions',
		image: 'http://cdn.tutorialzine.com/wp-content/uploads/2013/05/featured-100x100.jpg'
	},
	{
		url: 'http://tutorialzine.com/2013/05/mini-ajax-file-upload-form/',
		title: 'Mini AJAX File Upload Form',
		image: 'http://cdn.tutorialzine.com/wp-content/uploads/2013/05/ajax-file-upload-form-100x100.jpg'
	},
	{
		url: 'http://tutorialzine.com/2013/04/services-chooser-backbone-js/',
		title: 'Your First Backbone.js App – Service Chooser',
		image: 'http://cdn.tutorialzine.com/wp-content/uploads/2013/04/service_chooser_form-100x100.jpg'
	}
]

• ng-app
• ng-controller
• ng-repeat
• ng-options
• ng-pluralize
• ng-click
• ng-dblclick
• ng-src
• Expressions {{expression}}

step==1 :

step==2 :

• Les 4 boutons d'ajout ou de retrait des services à inclure s'activent ou se désactive (disabled) en fonction du contenu des listes et/ou des éléments sélectionnés
  • bouton ▶| : ajoute le(s) élément(s) sélectionnés de la liste de gauche à la liste de droite
  • bouton ▶▶| : ajoute tous les éléments sélectionnés de la liste de gauche à la liste de droite
  • bouton |◀ : retire le(s) élément(s) sélectionnés de la liste de droite et les place dans la liste de gauche
  • bouton |◀◀ : retire tous les éléments sélectionnés de la liste de droite et les place dans la liste de gauche

• Un double clic sur l'un des éléments des 2 listes ajoute ou retire l'élément et le passe dans la liste associée
• Le nombre de produits inclus se met à jour en fonction du nombre d'éléments dans la liste de droite

• Le passage à l'étape suivante n'est possible que si la liste de droite n'est pas vide
  • le bouton “Passer à l'étape suivante” affiche la vue suivante (en passant step à 2)
  • la vue affiche la liste des éléments ajoutés dans les éléments à inclure

1. Utiliser la directive ngRepeat
2. Utiliser la validation des formulaires
3. Créer des directives simples

1. Obtenir la liste des contacts et la filtrer
2. Ajouter un contact dans la liste
3. Modifier un contact existant
4. Supprimer un contact

• ng-app
• ng-controller
• ng-click
• ng-model
• ng-pluralize
• ng-repeat

A placer dans app/directives.js

• Zone filter : filtre l'ensemble des contacts affichés.
• Boutons :
  • [x] : supprime le contact associé
  • […] : affiche le formulaire de modification du contact
  • Ajouter : affiche le formulaire d'ajout de contact

• Formulaire d'ajout/modification
  • Le champ nom est obligatoire
  • Le champ mail doit comporter une adresse email valide
  • Le bouton Valider ajoute le contact à la liste des contacts et masque le formulaire
  • Le bouton Annuler masque le formulaire

• Utiliser des services Angular existants
• Mettre en oeuvre l'injection de dépendance

• Saisir un montant dans une devise source
• Sélectionner la devise cible
• Calculer la conversion à partir des taux courants
• Effectuer l'opération inverse (échange des devises)

• Télécharger le fichier currencymap.json sur le site Locale Planet
• Enregistrer le dans le dossier app/data ( à créer) de votre projet

Ce fichier JSON va permettre l'initialisation des listes de monnaies affichées dans l'application

Pour l'obtention des taux de change, on utilisera l'API Currency sur http://rate-exchange.appspot.com/ via Ajax et JSONP

Exemple d'interrogation :
http://rate-exchange.appspot.com/currency?from=USD&to=EUR&q=1

Résultat JSON :

{"to": "EUR", "rate": 0.83329500000000001, "from": "USD", "v": 0.83329500000000001}

• ng-app
• ng-controller
• ng-click
• ng-model
• ng-keypress

• Ajouter la liste des conversions déjà effectuées (les 2 monnaies, le sens , le tx et la date/heure de conversion)
• Vider cette liste

1. Créer un service (moteur de la calculatrice)
2. Utiliser un service (Injection de dépendance)
3. Créer des directives

1. Faire des calculs simples
2. Mémoriser un résultat
3. Eteindre/allumer calculatrice