Différences

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

--- slam4:richclient:angularjs:td2 [2015/02/09 19:12] – [TD n°2] jcheron
+++ slam4:richclient:angularjs:td2 [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 2: / Ligne 2: @@
 <html><div class="info">
-<table noborder><tr><td></html>
+<table class="noborder" style="width:100%"><tr><td></html>
 __**Prérequis :**__
   * [[slam4:richclient:angularjs:td1|Réalisation du TD n°1]]
@@ Ligne 9: / Ligne 9: @@
   * [[https://docs.angularjs.org/guide/filter|Filtres]]
 <html></td>
-<td>
+<td style="text-align:right">
+</html>{{:slam4:richclient:angularjs:angularjs.png?100&nolink|}}<html>
 </td>
 </tr>
@@ Ligne 34: / Ligne 35: @@
 ^**Application** | **ListesApp** (app/listesApp.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">selectedDispoItems</span></html>\\ Tableau des éléments sélectionnés dans la liste des produits disponibles |
@@ Ligne 48: / Ligne 49: @@
 <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>
 ==== -- Vues ====
@@ Ligne 125: / Ligne 126: @@
   - Utiliser la directive ngRepeat
   - Utiliser la validation des formulaires
-  - Créer des directives simples
+  - Créer des directives simples (voir [[slam4:richclient:angularjs:directives-creation]])
 ==== -- Fonctionnalités ====
@@ Ligne 160: / Ligne 161: @@
   * [[https://docs.angularjs.org/api/ng/directive/ngPluralize|ng-pluralize]]
   * [[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 ===
 A placer dans **app/directives.js**
@@ Ligne 168: / Ligne 174: @@
 === -- Interface ===
 {{: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 ===