slam4:richclient:angularjs:td2

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

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:05] – [2.4- Vue] jcheronslam4:richclient:angularjs:td2 [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
Ligne 1: Ligne 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]]
Ligne 7: Ligne 8:
   * [[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 ====
Ligne 29: Ligne 35:
 ^**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 |
Ligne 43: Ligne 49:
 <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 ====
Ligne 120: Ligne 126:
   - 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 ====
Ligne 155: Ligne 161:
   * [[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**
Ligne 163: Ligne 174:
 === -- 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 ===
  • slam4/richclient/angularjs/td2.1423505133.txt.gz
  • Dernière modification : il y a 6 ans
  • (modification externe)