From 3fe0bcd45d0fc61d3da460e5011ba87afee328e3 Mon Sep 17 00:00:00 2001
From: William Petit <william.petit@ptitcloud.fr>
Date: Thu, 9 Apr 2015 01:03:35 +0200
Subject: [PATCH] =?UTF-8?q?Formation=20Angular:=20exos=20suppl=C3=A9mentai?=
 =?UTF-8?q?res?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 javascript/angular/directives-1.md            |  2 +-
 javascript/angular/directives-2.md            |  2 +-
 javascript/angular/directives-3.md            |  2 +-
 javascript/angular/directives-4.md            |  2 +-
 javascript/angular/directives-5.md            |  2 +-
 javascript/angular/directives-6.md            |  2 +-
 javascript/angular/exercices/routage/app.js   | 19 +++++
 .../angular/exercices/routage/index.html      | 31 ++++++++
 .../exercices/scope-2/.solution/app.js        | 76 +++++++++++++++++++
 .../exercices/scope-2/.solution/index.html    | 35 +++++++++
 javascript/angular/exercices/scope-2/app.js   | 29 +++++++
 .../angular/exercices/scope-2/index.html      | 35 +++++++++
 javascript/angular/index.html                 |  3 +-
 javascript/angular/routage-1.md               | 28 +++++--
 javascript/angular/routage-2.md               |  3 +
 javascript/angular/services-1.md              |  2 +-
 javascript/angular/services-2.md              |  2 +-
 17 files changed, 260 insertions(+), 15 deletions(-)
 create mode 100644 javascript/angular/exercices/routage/app.js
 create mode 100644 javascript/angular/exercices/routage/index.html
 create mode 100644 javascript/angular/exercices/scope-2/.solution/app.js
 create mode 100644 javascript/angular/exercices/scope-2/.solution/index.html
 create mode 100644 javascript/angular/exercices/scope-2/app.js
 create mode 100644 javascript/angular/exercices/scope-2/index.html
 create mode 100644 javascript/angular/routage-2.md

diff --git a/javascript/angular/directives-1.md b/javascript/angular/directives-1.md
index 5bfe68d..f4ccb6d 100644
--- a/javascript/angular/directives-1.md
+++ b/javascript/angular/directives-1.md
@@ -1,4 +1,4 @@
-# .cadoles-slide-title[Les directives de base (1/)]
+# .cadoles-slide-title[Les directives de base (1/6)]
 
 **Itération avec ng-repeat: sur un tableau**
 ```html
diff --git a/javascript/angular/directives-2.md b/javascript/angular/directives-2.md
index 6675ab5..188af92 100644
--- a/javascript/angular/directives-2.md
+++ b/javascript/angular/directives-2.md
@@ -1,4 +1,4 @@
-# .cadoles-slide-title[Les directives de base (2/)]
+# .cadoles-slide-title[Les directives de base (2/6)]
 
 **Itération avec ng-repeat: sur un objet**
 ```html
diff --git a/javascript/angular/directives-3.md b/javascript/angular/directives-3.md
index d2f1db7..edb4a24 100644
--- a/javascript/angular/directives-3.md
+++ b/javascript/angular/directives-3.md
@@ -1,4 +1,4 @@
-# .cadoles-slide-title[Les directives de base (3/)]
+# .cadoles-slide-title[Les directives de base (3/6)]
 
 **Itération avec ng-repeat: sur un objet**
 ```html
diff --git a/javascript/angular/directives-4.md b/javascript/angular/directives-4.md
index 13119bc..c9b6444 100644
--- a/javascript/angular/directives-4.md
+++ b/javascript/angular/directives-4.md
@@ -1,4 +1,4 @@
-# .cadoles-slide-title[Les directives de base (4/)]
+# .cadoles-slide-title[Les directives de base (4/6)]
 
 **Conditions dans les templates: `ng-show`, `ng-hide`, `ng-switch`**
 ```html
diff --git a/javascript/angular/directives-5.md b/javascript/angular/directives-5.md
index ca41f37..362479d 100644
--- a/javascript/angular/directives-5.md
+++ b/javascript/angular/directives-5.md
@@ -1,4 +1,4 @@
-# .cadoles-slide-title[Les directives de base (5/)]
+# .cadoles-slide-title[Les directives de base (5/6)]
 
 **Modification dynamique du style: `ng-class`**
 ```html
diff --git a/javascript/angular/directives-6.md b/javascript/angular/directives-6.md
index 71efb64..ba1e314 100644
--- a/javascript/angular/directives-6.md
+++ b/javascript/angular/directives-6.md
@@ -1,4 +1,4 @@
-# .cadoles-slide-title[Les directives de base (6/)]
+# .cadoles-slide-title[Les directives de base (6/6)]
 
 **Inclusion de template avec la directive `ng-include`**
 
diff --git a/javascript/angular/exercices/routage/app.js b/javascript/angular/exercices/routage/app.js
new file mode 100644
index 0000000..a03ae0b
--- /dev/null
+++ b/javascript/angular/exercices/routage/app.js
@@ -0,0 +1,19 @@
+/*
+ * Énoncé:
+ *
+ *
+ */
+
+var Exo = angular.module('Exo', []);
+
+Exo.controller('MainCtrl', ['$scope', function($scope) {
+
+  $scope.nom = null;
+  $scope.prenom = null;
+  $scope.age = null;
+
+  $scope.sayHello = function() {
+    // alert('...');
+  };
+
+}]);
diff --git a/javascript/angular/exercices/routage/index.html b/javascript/angular/exercices/routage/index.html
new file mode 100644
index 0000000..2c9a6ea
--- /dev/null
+++ b/javascript/angular/exercices/routage/index.html
@@ -0,0 +1,31 @@
+<html>
+<head>
+  <meta charset="utf8">
+  <title>Exercice manipulation $scope et contrôleur</title>
+</head>
+<!-- Déclaration de l'application -->
+<body ng-app="Exo">
+
+  <div ng-controller="MainCtrl">
+
+    <label>Nom</label>
+    <input type="text" />
+    <br />
+
+    <label>Prénom</label>
+    <input type="text" />
+    <br />
+
+    <label>Age</label>
+    <input type="number" />
+    <br />
+
+    <button>Dire bonjour</button>
+  </div>
+
+  <!-- Import de du framework Angular -->
+  <script src="../node_modules/angular/angular.js"></script>
+  <script src="app.js"></script>
+
+</body>
+</html>
diff --git a/javascript/angular/exercices/scope-2/.solution/app.js b/javascript/angular/exercices/scope-2/.solution/app.js
new file mode 100644
index 0000000..a8a5439
--- /dev/null
+++ b/javascript/angular/exercices/scope-2/.solution/app.js
@@ -0,0 +1,76 @@
+/*
+ * Énoncé:
+ *
+ * Implémenter les contrôleurs MainCtrl, ACtrl et BCtrl afin que les modifications des champs
+ * dans le controleur MainCtrl soient répliqués dans les champs respectifs de ACtrl et BCtrl,
+ * et inversement.
+ *
+ * Indices:
+ *  - Attention à l'héritage des $scope
+ *  - Penser à l'utilisation de $broadcast, $emit et $watch
+ */
+
+var Exo = angular.module('Exo', []);
+
+Exo.controller('MainCtrl', ['$scope', function($scope) {
+
+  $scope.numberA = 5;
+  $scope.numberB = 2;
+
+  $scope.$watch('numberA', function(newVal) {
+    $scope.$broadcast('numberAChanged', {value: newVal});
+  });
+
+  $scope.$watch('numberB', function(newVal) {
+    $scope.$broadcast('numberBChanged', {value: newVal});
+  });
+
+  $scope.$on('numberAChanged', function(evt, data) {
+    $scope.numberA = data.value;
+  });
+
+  $scope.$on('numberBChanged', function(evt, data) {
+    $scope.numberB = data.value;
+  });
+
+}]);
+
+Exo.controller('ACtrl', ['$scope', function($scope) {
+
+  $scope.$watch('numberA', function(newVal) {
+    $scope.$emit('numberAChanged', {value: newVal});
+  });
+
+  $scope.$watch('numberB', function(newVal) {
+    $scope.$emit('numberBChanged', {value: newVal});
+  });
+
+  $scope.$on('numberAChanged', function(evt, data) {
+    $scope.numberA = data.value;
+  });
+
+  $scope.$on('numberBChanged', function(evt, data) {
+    $scope.numberB = data.value;
+  });
+
+}]);
+
+Exo.controller('BCtrl', ['$scope', function($scope) {
+
+  $scope.$watch('numberA', function(newVal) {
+    $scope.$emit('numberAChanged', {value: newVal});
+  });
+
+  $scope.$watch('numberB', function(newVal) {
+    $scope.$emit('numberBChanged', {value: newVal});
+  });
+
+  $scope.$on('numberAChanged', function(evt, data) {
+    $scope.numberA = data.value;
+  });
+
+  $scope.$on('numberBChanged', function(evt, data) {
+    $scope.numberB = data.value;
+  });
+
+}]);
diff --git a/javascript/angular/exercices/scope-2/.solution/index.html b/javascript/angular/exercices/scope-2/.solution/index.html
new file mode 100644
index 0000000..4967f71
--- /dev/null
+++ b/javascript/angular/exercices/scope-2/.solution/index.html
@@ -0,0 +1,35 @@
+<html>
+<head>
+  <meta charset="utf8">
+  <title>Exercice manipulation $scope et contrôleur</title>
+</head>
+<!-- Déclaration de l'application -->
+<body ng-app="Exo">
+
+  <div ng-controller="MainCtrl">
+    <h2>Contrôleur Parent</h2>
+    <label>Nombre A</label><input type="number" ng-model="numberA"/><br />
+    <label>Nombre B</label><input type="number" ng-model="numberB"/>
+    <hr />
+
+    <div ng-controller="ACtrl">
+      <h2>Contrôleur A</h2>
+      <label>Nombre A</label><input type="number" ng-model="numberA"/><br />
+      <label>Nombre B</label><input type="number" ng-model="numberB"/>
+    </div>
+    <hr />
+
+    <div ng-controller="BCtrl">
+      <h2>Contrôleur B</h2>
+      <label>Nombre A</label><input type="number" ng-model="numberA"/><br />
+      <label>Nombre B</label><input type="number" ng-model="numberB"/>
+    </div>
+
+  </div>
+
+  <!-- Import de du framework Angular -->
+  <script src="../../node_modules/angular/angular.js"></script>
+  <script src="app.js"></script>
+
+</body>
+</html>
diff --git a/javascript/angular/exercices/scope-2/app.js b/javascript/angular/exercices/scope-2/app.js
new file mode 100644
index 0000000..8fac1bd
--- /dev/null
+++ b/javascript/angular/exercices/scope-2/app.js
@@ -0,0 +1,29 @@
+/*
+ * Énoncé:
+ *
+ * Implémenter les contrôleurs MainCtrl, ACtrl et BCtrl afin que les modifications des propriétés numberA & numberB
+ * dans le controleur MainCtrl soient répliquées dans les champs respectifs de ACtrl et BCtrl,
+ * et inversement.
+ *
+ * Indices:
+ *  - Attention à l'héritage des $scope
+ *  - Penser à l'utilisation de $broadcast, $emit et $watch
+ */
+
+var Exo = angular.module('Exo', []);
+
+Exo.controller('MainCtrl', ['$scope', function($scope) {
+
+  $scope.numberA = 5;
+  $scope.numberB = 2;
+
+}]);
+
+Exo.controller('ACtrl', ['$scope', function($scope) {
+
+
+}]);
+
+Exo.controller('BCtrl', ['$scope', function($scope) {
+
+}]);
diff --git a/javascript/angular/exercices/scope-2/index.html b/javascript/angular/exercices/scope-2/index.html
new file mode 100644
index 0000000..e9533be
--- /dev/null
+++ b/javascript/angular/exercices/scope-2/index.html
@@ -0,0 +1,35 @@
+<html>
+<head>
+  <meta charset="utf8">
+  <title>Exercice manipulation $scope et contrôleur</title>
+</head>
+<!-- Déclaration de l'application -->
+<body ng-app="Exo">
+
+  <div ng-controller="MainCtrl">
+    <h2>Contrôleur Parent</h2>
+    <label>Nombre A</label><input type="number" ng-model="numberA"/><br />
+    <label>Nombre B</label><input type="number" ng-model="numberB"/>
+    <hr />
+
+    <div ng-controller="ACtrl">
+      <h2>Contrôleur A</h2>
+      <label>Nombre A</label><input type="number" ng-model="numberA"/><br />
+      <label>Nombre B</label><input type="number" ng-model="numberB"/>
+    </div>
+    <hr />
+    
+    <div ng-controller="BCtrl">
+      <h2>Contrôleur B</h2>
+      <label>Nombre A</label><input type="number" ng-model="numberA"/><br />
+      <label>Nombre B</label><input type="number" ng-model="numberB"/>
+    </div>
+
+  </div>
+
+  <!-- Import de du framework Angular -->
+  <script src="../node_modules/angular/angular.js"></script>
+  <script src="app.js"></script>
+
+</body>
+</html>
diff --git a/javascript/angular/index.html b/javascript/angular/index.html
index 056a954..3eb2443 100644
--- a/javascript/angular/index.html
+++ b/javascript/angular/index.html
@@ -29,8 +29,7 @@
         'directives-4',
         'directives-5',
         'directives-6',
-        'fin',
-        'licence'
+        'fin'
       ];
     </script>
     <script src="../bower_components/remark/out/remark.js"></script>
diff --git a/javascript/angular/routage-1.md b/javascript/angular/routage-1.md
index a13bb60..e64c7ce 100644
--- a/javascript/angular/routage-1.md
+++ b/javascript/angular/routage-1.md
@@ -1,10 +1,28 @@
-# .cadoles-slide-title[Routage (1/)]
+# .cadoles-slide-title[Routage dans le navigateur (1/)]
 
-**Le "routage" côté client**
+**Différences entre la navigation classique et la navigation côté client**
+.cadoles-left-column[
+**Navigation classique**
 
-.cadoles-list[
+.cadoles-center[
+`GET / -> GET /page1 -> GET /page2 -> etc`
+]
 
-- Se base sur l'API "History" HTML5 (pushState) ou les ancres "#"
-- Permet de simuler la navigation classique d'un navigateur, avec la gestion de l'historique sans besoin obligatoire de requête au serveur.
+- Chaque page est renvoyée par le serveur.
+- Le serveur gère l'association URL/contenu.
+
+]
+
+.cadoles-right-column[
+
+**Navigation côté navigateur**
+
+.cadoles-center[
+`GET / -> #page1 -> #page2 -> etc`
+]
+
+- Une fois la première requête effectuée, le navigateur utilise les ancres (\#) pour simuler la navigation de page en page.
+- Javascript réagit à ces changements du "hash" de l'URL pour modifier la page.
+- Le client (Javascript/navigateur) gère l'association URL+hash/contenu.
 
 ]
diff --git a/javascript/angular/routage-2.md b/javascript/angular/routage-2.md
new file mode 100644
index 0000000..3071b19
--- /dev/null
+++ b/javascript/angular/routage-2.md
@@ -0,0 +1,3 @@
+# .cadoles-slide-title[Routage dans le navigateur (2/)]
+
+**Le module `ngRoute`**
diff --git a/javascript/angular/services-1.md b/javascript/angular/services-1.md
index c5b1797..e762d74 100644
--- a/javascript/angular/services-1.md
+++ b/javascript/angular/services-1.md
@@ -1,4 +1,4 @@
-# .cadoles-slide-title[Les services (1/)]
+# .cadoles-slide-title[Les services (1/2)]
 
 - Instanciés à la volée
 - En mode "singleton" _(une seule instance pour l'ensemble de l'application)_
diff --git a/javascript/angular/services-2.md b/javascript/angular/services-2.md
index c19b6b5..e6d4c57 100644
--- a/javascript/angular/services-2.md
+++ b/javascript/angular/services-2.md
@@ -1,4 +1,4 @@
-# .cadoles-slide-title[Les services (2/)]
+# .cadoles-slide-title[Les services (2/2)]
 
 **Création de services**