diff --git a/javascript/angular/angular.md b/javascript/angular/angular.md
index 06a89ce..a070176 100644
--- a/javascript/angular/angular.md
+++ b/javascript/angular/angular.md
@@ -2,7 +2,7 @@
.cadoles-list[
-- Framework applicatif côté client en Javascript
+- Framework applicatif côté client en Javascript
- Initialement présenté par Google en 2009
- Licence MIT
- Dernière version stable 1.3.15 (version 2 en alpha)
diff --git a/javascript/angular/controleurs.md b/javascript/angular/controleurs.md
index dabf07a..97f8574 100644
--- a/javascript/angular/controleurs.md
+++ b/javascript/angular/controleurs.md
@@ -3,7 +3,7 @@
.cadoles-small[
- Les contrôleurs permettent de gérer la logique métier dans votre application Angular.
-- La définition du périmètre d'action d'un contrôleur est lié à un élément du DOM et se fait via l'utilisation de la directive `ng-controller`
+- Le périmètre d'action d'un contrôleur est lié à un élément du DOM et sa définition s'effectue via l'utilisation de la directive `ng-controller`
]
diff --git a/javascript/angular/directives-1.md b/javascript/angular/directives-1.md
new file mode 100644
index 0000000..5bfe68d
--- /dev/null
+++ b/javascript/angular/directives-1.md
@@ -0,0 +1,35 @@
+# .cadoles-slide-title[Les directives de base (1/)]
+
+**Itération avec ng-repeat: sur un tableau**
+```html
+
+
+
+
+
+
+ {{ $index }}
+
+ {{ i.label }}
+
+
+
+
+
+
+
+```
diff --git a/javascript/angular/directives-2.md b/javascript/angular/directives-2.md
new file mode 100644
index 0000000..6675ab5
--- /dev/null
+++ b/javascript/angular/directives-2.md
@@ -0,0 +1,29 @@
+# .cadoles-slide-title[Les directives de base (2/)]
+
+**Itération avec ng-repeat: sur un objet**
+```html
+
+
+
+
+
+ Clé: {{ key }}Valeur: {{ value }}
+
+
+
+
+
+
+
+```
diff --git a/javascript/angular/directives-3.md b/javascript/angular/directives-3.md
new file mode 100644
index 0000000..d2f1db7
--- /dev/null
+++ b/javascript/angular/directives-3.md
@@ -0,0 +1,29 @@
+# .cadoles-slide-title[Les directives de base (3/)]
+
+**Itération avec ng-repeat: sur un objet**
+```html
+
+
+
+
+
+ Clé: {{ key }}Valeur: {{ value }}
+
+
+
+
+
+
+
+```
diff --git a/javascript/angular/directives-4.md b/javascript/angular/directives-4.md
new file mode 100644
index 0000000..13119bc
--- /dev/null
+++ b/javascript/angular/directives-4.md
@@ -0,0 +1,22 @@
+# .cadoles-slide-title[Les directives de base (4/)]
+
+**Conditions dans les templates: `ng-show`, `ng-hide`, `ng-switch`**
+```html
+
+
+
+
+ Caché !
+ Affiché !
+
+
+ Affiché !
+ Caché !
+ Caché !
+
+
+
+
+
+
+```
diff --git a/javascript/angular/directives-5.md b/javascript/angular/directives-5.md
new file mode 100644
index 0000000..ca41f37
--- /dev/null
+++ b/javascript/angular/directives-5.md
@@ -0,0 +1,23 @@
+# .cadoles-slide-title[Les directives de base (5/)]
+
+**Modification dynamique du style: `ng-class`**
+```html
+
+
+
+
+
+
+ Rouge et large
+
+ Bleu
+
+
+
+
+
+```
diff --git a/javascript/angular/directives-6.md b/javascript/angular/directives-6.md
new file mode 100644
index 0000000..1db80c3
--- /dev/null
+++ b/javascript/angular/directives-6.md
@@ -0,0 +1,26 @@
+# .cadoles-slide-title[Les directives de base (6/)]
+
+**Inclusion de template avec la directive `ng-include`**
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+- Les templates sont chargés à la volée, en AJAX
+- Il est possible de les précompiler et de les inclures sous leur forme Javascript lors de la mise en production
diff --git a/javascript/angular/exercices/conditions/.solution/app.js b/javascript/angular/exercices/conditions/.solution/app.js
new file mode 100644
index 0000000..3c887a4
--- /dev/null
+++ b/javascript/angular/exercices/conditions/.solution/app.js
@@ -0,0 +1,16 @@
+/*
+ * Énoncé:
+ * Implémenter les conditions dans la directive "ng-class" afin d'afficher un assemblage de cellules.
+ *
+ * Le rectangle résultant doit présenter une alternance de couleur rouge & bleu sur ses colonnes, et
+ * avoir un côté horizontale de longueur "edge"
+ */
+
+var Exo = angular.module('Exo', []);
+
+Exo.controller('MainCtrl', ['$scope', function($scope) {
+
+ $scope.range = new Array(100);
+ $scope.edge = 10;
+
+}]);
diff --git a/javascript/angular/exercices/conditions/.solution/index.html b/javascript/angular/exercices/conditions/.solution/index.html
new file mode 100644
index 0000000..a6d74a4
--- /dev/null
+++ b/javascript/angular/exercices/conditions/.solution/index.html
@@ -0,0 +1,28 @@
+
+
+
+ Exercice: conditions
+
+
+
+
+
+
+
+
+ {{$index}}
+
+
+
+
+
+
+
+
diff --git a/javascript/angular/exercices/conditions/app.js b/javascript/angular/exercices/conditions/app.js
new file mode 100644
index 0000000..3c887a4
--- /dev/null
+++ b/javascript/angular/exercices/conditions/app.js
@@ -0,0 +1,16 @@
+/*
+ * Énoncé:
+ * Implémenter les conditions dans la directive "ng-class" afin d'afficher un assemblage de cellules.
+ *
+ * Le rectangle résultant doit présenter une alternance de couleur rouge & bleu sur ses colonnes, et
+ * avoir un côté horizontale de longueur "edge"
+ */
+
+var Exo = angular.module('Exo', []);
+
+Exo.controller('MainCtrl', ['$scope', function($scope) {
+
+ $scope.range = new Array(100);
+ $scope.edge = 10;
+
+}]);
diff --git a/javascript/angular/exercices/conditions/index.html b/javascript/angular/exercices/conditions/index.html
new file mode 100644
index 0000000..64cd5cd
--- /dev/null
+++ b/javascript/angular/exercices/conditions/index.html
@@ -0,0 +1,28 @@
+
+
+
+ Exercice: conditions
+
+
+
+
+
+
+
+
+ {{$index}}
+
+
+
+
+
+
+
+
diff --git a/javascript/angular/exercices/iteration/.solution/app.js b/javascript/angular/exercices/iteration/.solution/app.js
new file mode 100644
index 0000000..b14fba8
--- /dev/null
+++ b/javascript/angular/exercices/iteration/.solution/app.js
@@ -0,0 +1,47 @@
+/*
+ * Énoncé:
+ * Via la directive ng-repeat, afficher dans la page sous la forme d'un tableau, la liste des licences
+ * disponibles sur Github lors de la création d'un nouveau dépôt.
+ *
+ * Le tableau comprendra 2 colonnes: le nom de la licence et une colonne avec un bouton "Afficher la description".
+ * Lors d'un clic sur ce bouton, l'application devra afficher la description de la licence en utilisant la méthode
+ * showLicenseDesc(licenceURL) déjà implémentée dans le contrôleur.
+ *
+ * Aide:
+ * Voir l'élément pour l'affichage du lien et la directive ng-href sur la
+ * documentation Angular https://code.angularjs.org/1.3.15/docs/api/ng/directive/ngHref
+ *
+ * Liens:
+ * - API Github https://developer.github.com/v3/licenses
+ */
+
+var Exo = angular.module('Exo', []);
+
+Exo.controller('MainCtrl', ['$scope', '$http', '$window', function($scope, $http, $window) {
+
+ $scope.licences = [];
+
+ $http({
+ method: 'GET',
+ url: 'https://api.github.com/licenses',
+ headers: { Accept: 'application/vnd.github.drax-preview+json' }
+ })
+ .then(function(res) {
+ $scope.licences = res.data;
+ })
+ ;
+
+ $scope.showLicenseDesc = function(licenceUrl) {
+ $http({
+ method: 'GET',
+ url: licenceUrl,
+ headers: { Accept: 'application/vnd.github.drax-preview+json' }
+ })
+ .then(function(res) {
+ $window.alert(res.data.description);
+ })
+ .catch(console.error.bind(console))
+ ;
+ };
+
+}]);
diff --git a/javascript/angular/exercices/iteration/.solution/index.html b/javascript/angular/exercices/iteration/.solution/index.html
new file mode 100644
index 0000000..38dda60
--- /dev/null
+++ b/javascript/angular/exercices/iteration/.solution/index.html
@@ -0,0 +1,32 @@
+
+
+
+ Exercice: itération
+
+
+
+
+
+
+
Github Licenses
+
+
+
+
Name
+
Actions
+
+
+
+
+
{{l.name}}
+
+
+
+
+
+
+
+
+
+
+
diff --git a/javascript/angular/exercices/iteration/app.js b/javascript/angular/exercices/iteration/app.js
new file mode 100644
index 0000000..b14fba8
--- /dev/null
+++ b/javascript/angular/exercices/iteration/app.js
@@ -0,0 +1,47 @@
+/*
+ * Énoncé:
+ * Via la directive ng-repeat, afficher dans la page sous la forme d'un tableau, la liste des licences
+ * disponibles sur Github lors de la création d'un nouveau dépôt.
+ *
+ * Le tableau comprendra 2 colonnes: le nom de la licence et une colonne avec un bouton "Afficher la description".
+ * Lors d'un clic sur ce bouton, l'application devra afficher la description de la licence en utilisant la méthode
+ * showLicenseDesc(licenceURL) déjà implémentée dans le contrôleur.
+ *
+ * Aide:
+ * Voir l'élément pour l'affichage du lien et la directive ng-href sur la
+ * documentation Angular https://code.angularjs.org/1.3.15/docs/api/ng/directive/ngHref
+ *
+ * Liens:
+ * - API Github https://developer.github.com/v3/licenses
+ */
+
+var Exo = angular.module('Exo', []);
+
+Exo.controller('MainCtrl', ['$scope', '$http', '$window', function($scope, $http, $window) {
+
+ $scope.licences = [];
+
+ $http({
+ method: 'GET',
+ url: 'https://api.github.com/licenses',
+ headers: { Accept: 'application/vnd.github.drax-preview+json' }
+ })
+ .then(function(res) {
+ $scope.licences = res.data;
+ })
+ ;
+
+ $scope.showLicenseDesc = function(licenceUrl) {
+ $http({
+ method: 'GET',
+ url: licenceUrl,
+ headers: { Accept: 'application/vnd.github.drax-preview+json' }
+ })
+ .then(function(res) {
+ $window.alert(res.data.description);
+ })
+ .catch(console.error.bind(console))
+ ;
+ };
+
+}]);
diff --git a/javascript/angular/exercices/iteration/index.html b/javascript/angular/exercices/iteration/index.html
new file mode 100644
index 0000000..0d7713d
--- /dev/null
+++ b/javascript/angular/exercices/iteration/index.html
@@ -0,0 +1,29 @@
+
+
+
+ Exercice: itération
+
+
+
+
+
+
+
Github Licenses
+
+
+
+
Name
+
Actions
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/javascript/angular/exercices/scope-2/app.js b/javascript/angular/exercices/scope-1/.solution/app.js
similarity index 83%
rename from javascript/angular/exercices/scope-2/app.js
rename to javascript/angular/exercices/scope-1/.solution/app.js
index a892389..af4f19d 100644
--- a/javascript/angular/exercices/scope-2/app.js
+++ b/javascript/angular/exercices/scope-1/.solution/app.js
@@ -18,8 +18,8 @@ Exo.controller('MainCtrl', ['$scope', function($scope) {
$scope.prenom = null;
$scope.age = null;
- $scope.direBonjour = function() {
- // alert('...');
+ $scope.sayHello = function() {
+ alert('Bonjour '+$scope.nom+' '+$scope.prenom+'. Votre âge est '+$scope.age);
};
}]);
diff --git a/javascript/angular/exercices/scope-2/index.html b/javascript/angular/exercices/scope-1/.solution/index.html
similarity index 62%
rename from javascript/angular/exercices/scope-2/index.html
rename to javascript/angular/exercices/scope-1/.solution/index.html
index 2c9a6ea..60162bb 100644
--- a/javascript/angular/exercices/scope-2/index.html
+++ b/javascript/angular/exercices/scope-1/.solution/index.html
@@ -9,22 +9,22 @@
-
+
-
+
-
+
-
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/javascript/angular/exercices/scope-1/app.js b/javascript/angular/exercices/scope-1/app.js
index a892389..9a7c67e 100644
--- a/javascript/angular/exercices/scope-1/app.js
+++ b/javascript/angular/exercices/scope-1/app.js
@@ -18,7 +18,7 @@ Exo.controller('MainCtrl', ['$scope', function($scope) {
$scope.prenom = null;
$scope.age = null;
- $scope.direBonjour = function() {
+ $scope.sayHello = function() {
// alert('...');
};
diff --git a/javascript/angular/exercices/services-1/.solution/app.js b/javascript/angular/exercices/services-1/.solution/app.js
new file mode 100644
index 0000000..ef4e39d
--- /dev/null
+++ b/javascript/angular/exercices/services-1/.solution/app.js
@@ -0,0 +1,36 @@
+/*
+ * Énoncé:
+ * Récupérer les données du formulaire et envoyer celles-ci via un clic sur le bouton "Envoyer".
+ * Les données devront être transmises sous la forme JSON au serveur NodeJS fourni avec l'exercice
+ * via la méthode HTTP POST avec le service $http.
+ *
+ * Documentation service $http: https://code.angularjs.org/1.3.15/docs/api/ng/service/$http
+ *
+ * Partie serveur:
+ * - Se placer dans le répertoire de l'exercice avec un terminal
+ * - Lancer "node server.js"
+ *
+ */
+
+var ENDPOINT = 'http://localhost:3000/';
+
+var Exo = angular.module('Exo', []);
+
+Exo.controller('MainCtrl', ['$scope', '$http', function($scope, $http) {
+
+ $scope.data = {
+ nom: '',
+ prenom: '',
+ age: 0
+ };
+
+ $scope.sendData = function() {
+ $http.post(ENDPOINT, $scope.data)
+ .then(function(res) {
+ console.log(res);
+ alert(res.data.message);
+ })
+ ;
+ };
+
+}]);
diff --git a/javascript/angular/exercices/services-1/.solution/index.html b/javascript/angular/exercices/services-1/.solution/index.html
new file mode 100644
index 0000000..23d2453
--- /dev/null
+++ b/javascript/angular/exercices/services-1/.solution/index.html
@@ -0,0 +1,30 @@
+
+