Table des matières
TD n°1
 | Tous les exercices utilisent Bootstrap pour la partie CSS. CDN URL : https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css |
-- Création du/des projet/s
- Créer un dossier angular-tds à partir du Root de votre serveur web ;
- Publier angular-tds sur github en tant que nouveau repository ;
- Ajouter jcheron à la liste des colaborators de ce projet ;
- Créer ensuite un dossier/projet différent pour chaque exercice dans angular-tds ;
- Publier (commit and push) régulièrement sur github.
-- Exercice : application Note
-- Objectifs
- Créer un module et un contrôleur
- Utiliser des directives Angular
- Mettre en oeuvre le Data-binding
- Utiliser un service ($cookies)
-- Fonctionnalités
- Saisir une note (message textuel) et afficher le nombre de caractères restants (le message est limité à 100 caractères saisis)
- Enregistrer (côté client en JS)
- Effacer le contenu
- Afficher les messages d'info (sauvegarde, modification…)
- Gérer les changements de classe CSS sur l'affichage d'info
-- Application/Contrôleurs
| Application | NoteApp (app/noteApp.js) |
|---|---|
| Contrôleur | NoteController (app/noteController.js) |
| messageNote variable stockant le contenu de la note |
|
| info message affiché (modifié, sauvegardé…) |
|
| status entier (facultatif) correspondant aux différents statuts possibles : 0⇒Note sauvegardée, 1⇒statut initial, 2⇒reste moins de 20, 3⇒reste moins de 10 |
|
| save() Enregistrement dans un cookie |
|
| clear() vide messageNote |
|
| count() Calcule le nombre de caractères restants (sur 100) et le retourne |
-- Vue
-- Directives utilisées
-- Interface
-- Logique applicative / comportement de l'interface
- sur saisie dans la zone messageNote (textarea), le nombre de caractères restants est indiqué dans la zone status
- la zone info apparaît et indique “note modifiée” dès que messageNote est modifié
- Le style de la zone status passe à <fc orange>alert-warning</fc> si le nombre de caractères restant est inférieur à 50, et à <fc red>alert-danger</fc> s'il est inférieur à 20
- Sur enregistrement (à condition que le message ne soit pas vide) :
- la zone info affiche “note sauvegardée” et sont style passe à <fc #008000>alert-success</fc>
- Sur effacement (à condition que le message ne soit pas vide) :
- la zone info disparaît
-- Test en ligne
-- Exercice : Choix de services
-- Objectifs
- Créer un module et un contrôleur
- Utiliser des directives Angular
- Mettre en oeuvre le Data-binding
-- Fonctionnalités
- Sélectionner/désélectionner des services
- Calculer le montant dû
- Afficher le nombre de services sélectionnés
-- Application/Contrôleurs
| Application | ServicesApp (app/servicesApp.js) |
|---|---|
| Contrôleur | ServicesController (app/servicesController.js) |
| services Tableau des services disponibles défini en JSON |
|
| total() Calcul le total des services actifs |
|
| toggleActive() Change le statut d'un service |
Services : à intégrer dans le contrôleur
[
{
"name": "Web Development",
"price": 300,
"active":true
},{
"name": "Design",
"price": 400,
"active":false
},{
"name": "Integration",
"price": 250,
"active":false
},{
"name": "Formation",
"price": 220,
"active":false
}
]
Ressources :
-- Vue
-- Directives utilisées
- ng-app
- ng-controller
- ng-click
- Expressions {{expression}}
Filtres : currency
-- Interface
-- Logique applicative / comportement de l'interface
- Le service Web development est sélectionné par défaut
- La classe css d'un service sélectionné est égale à active
- La sélection/dé-sélection met à jour l'affichage du nombre de services sélectionnés, ainsi que le total
-- Ajout code promo
- La saisie d'un code promo permet d'appliquer un taux de réduction au montant total (si la case est cochée et le code valide)
- La liste des codes est fournie au format JSON, dans un fichier, qu'il faudra charger via le service $http (à injecter dans le contrôleur)
{
"B22":0.05,
"AZ":0.01,
"UBOAT":0.02
}
