| Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente |
| slam4:richclient:angularjs:td2 [2015/02/09 19:03] – [2.4- Vue] jcheron | slam4:richclient:angularjs:td2 [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1 |
|---|
| ====== TD n°2 ====== | ====== TD n°2 ====== |
| |
| <html><div class="info"></html> | <html><div class="info"> |
| | <table class="noborder" style="width:100%"><tr><td></html> |
| __**Prérequis :**__ | __**Prérequis :**__ |
| * [[slam4:richclient:angularjs:td1|Réalisation du TD n°1]] | * [[slam4:richclient:angularjs:td1|Réalisation du TD n°1]] |
| * [[slam4:richclient:angularjs:services]] | * [[slam4:richclient:angularjs:services]] |
| * [[https://docs.angularjs.org/guide/filter|Filtres]] | * [[https://docs.angularjs.org/guide/filter|Filtres]] |
| <html></div></html> | <html></td> |
| | <td style="text-align:right"> |
| | </html>{{:slam4:richclient:angularjs:angularjs.png?100&nolink|}}<html> |
| | </td> |
| | </tr> |
| | </table></div></html> |
| ===== -- Exercice : choix multiples ===== | ===== -- Exercice : choix multiples ===== |
| ==== -- Objectifs ==== | ==== -- Objectifs ==== |
| ^**Application** | **ListesApp** (app/listesApp.js) | | ^**Application** | **ListesApp** (app/listesApp.js) | |
| ^**Contrôleur** | **ListesController** (app/listesController.js) | | ^**Contrôleur** | **ListesController** (app/listesController.js) | |
| ^::: | <html><span class="variable">dispoItems</span></html>\\ Tableau des produits disponibles défini en JSON | | ^::: | <html><span class="variable">dispoItems</span></html>\\ Tableau des produits disponibles défini en JSON (utiliser le service $http)| |
| ^::: | <html><span class="variable">includedItems</span></html>\\ Tableau des produits à inclure | | ^::: | <html><span class="variable">includedItems</span></html>\\ Tableau des produits à inclure | |
| ^::: | <html><span class="variable">selectedDispoItems</span></html>\\ Tableau des éléments sélectionnés dans la liste des produits disponibles | | ^::: | <html><span class="variable">selectedDispoItems</span></html>\\ Tableau des éléments sélectionnés dans la liste des produits disponibles | |
| <sxh javascript> | <sxh javascript> |
| [ | [ |
| { | { |
| url: 'http://tutorialzine.com/2013/07/50-must-have-plugins-for-extending-twitter-bootstrap/', | "url": "http://tutorialzine.com/2013/07/50-must-have-plugins-for-extending-twitter-bootstrap/", |
| title: '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' | "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/', | "url": "http://tutorialzine.com/2013/08/simple-registration-system-php-mysql/", |
| title: 'Making a Super Simple Registration System With PHP and 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' | "image": "http://cdn.tutorialzine.com/wp-content/uploads/2013/08/simple_registration_system-100x100.jpg" |
| }, | }, |
| { | { |
| url: 'http://tutorialzine.com/2013/08/slideout-footer-css/', | "url": "http://tutorialzine.com/2013/08/slideout-footer-css/", |
| title: 'Create a slide-out footer with this neat z-index trick', | "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' | "image": "http://cdn.tutorialzine.com/wp-content/uploads/2013/08/slide-out-footer-100x100.jpg" |
| }, | }, |
| { | { |
| url: 'http://tutorialzine.com/2013/06/digital-clock/', | "url": "http://tutorialzine.com/2013/06/digital-clock/", |
| title: 'How to Make a Digital Clock with jQuery and CSS3', | "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' | "image": "http://cdn.tutorialzine.com/wp-content/uploads/2013/06/digital_clock-100x100.jpg" |
| }, | }, |
| { | { |
| url: 'http://tutorialzine.com/2013/05/diagonal-fade-gallery/', | "url": "http://tutorialzine.com/2013/05/diagonal-fade-gallery/", |
| title: 'Smooth Diagonal Fade Gallery with CSS3 Transitions', | "title": "Smooth Diagonal Fade Gallery with CSS3 Transitions", |
| image: 'http://cdn.tutorialzine.com/wp-content/uploads/2013/05/featured-100x100.jpg' | "image": "http://cdn.tutorialzine.com/wp-content/uploads/2013/05/featured-100x100.jpg" |
| }, | }, |
| { | { |
| url: 'http://tutorialzine.com/2013/05/mini-ajax-file-upload-form/', | "url": "http://tutorialzine.com/2013/05/mini-ajax-file-upload-form/", |
| title: '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' | "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/', | "url": "http://tutorialzine.com/2013/04/services-chooser-backbone-js/", |
| title: 'Your First Backbone.js App – Service Chooser', | "title": "Your First Backbone.js App – Service Chooser", |
| image: 'http://cdn.tutorialzine.com/wp-content/uploads/2013/04/service_chooser_form-100x100.jpg' | "image": "http://cdn.tutorialzine.com/wp-content/uploads/2013/04/service_chooser_form-100x100.jpg" |
| } | } |
| ] | ] |
| </sxh> | </sxh> |
| ==== -- Vues ==== | ==== -- Vues ==== |
| - Utiliser la directive ngRepeat | - Utiliser la directive ngRepeat |
| - Utiliser la validation des formulaires | - Utiliser la validation des formulaires |
| - Créer des directives simples | - Créer des directives simples (voir [[slam4:richclient:angularjs:directives-creation]]) |
| |
| ==== -- Fonctionnalités ==== | ==== -- Fonctionnalités ==== |
| * [[https://docs.angularjs.org/api/ng/directive/ngPluralize|ng-pluralize]] | * [[https://docs.angularjs.org/api/ng/directive/ngPluralize|ng-pluralize]] |
| * [[https://docs.angularjs.org/api/ng/directive/ngRepeat|ng-repeat]] | * [[https://docs.angularjs.org/api/ng/directive/ngRepeat|ng-repeat]] |
| | |
| | === Fonctions utiles === |
| | |
| | * [[https://docs.angularjs.org/api/ng/function/angular.copy|angular.copy]] |
| | |
| === -- Directives à créer === | === -- Directives à créer === |
| A placer dans **app/directives.js** | A placer dans **app/directives.js** |
| === -- Interface === | === -- Interface === |
| {{:slam4:richclient:angularjs:ex3.png?600|}} | {{:slam4:richclient:angularjs:ex3.png?600|}} |
| <html><!--<a target="_new" href="http://angular.kobject.net/repeat/v_repeat.html"><div style="width:400px" class="btn">Tester l'appli <b>Gestion de contacts</b></div></a>--></html> | |
| | <html><a target="_new" href="http://angular.kobject.net/ex4" class="btn">Tester l'appli <b>Gestion de contacts</b></a></html> |
| |
| === -- Logique applicative / comportement de l'interface === | === -- Logique applicative / comportement de l'interface === |
| - Modifier la méthode delete du contrôleur | - Modifier la méthode delete du contrôleur |
| - Ajouter un bouton Annuler la ou les suppressions (visible s'il existe un élément supprimer) et affichant le nombre de suppressions à annuler, et la méthode **cancelOneDeletion()** | - Ajouter un bouton Annuler la ou les suppressions (visible s'il existe un élément supprimer) et affichant le nombre de suppressions à annuler, et la méthode **cancelOneDeletion()** |
| | |
| | {{:slam4:richclient:angularjs:ex3-deleted.png?500|}} |