diff --git a/javascript/angular/exercices/services-1/app.js b/javascript/angular/exercices/services-1/app.js
new file mode 100644
index 0000000..3a2356e
--- /dev/null
+++ b/javascript/angular/exercices/services-1/app.js
@@ -0,0 +1,27 @@
+/*
+ * É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', function($scope) {
+
+ $scope.data = {
+ nom: '',
+ prenom: '',
+ age: 0
+ };
+
+}]);
diff --git a/javascript/angular/exercices/services-1/index.html b/javascript/angular/exercices/services-1/index.html
new file mode 100644
index 0000000..7c542ed
--- /dev/null
+++ b/javascript/angular/exercices/services-1/index.html
@@ -0,0 +1,30 @@
+
+
+
+ Exercice: utilisation de service
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/javascript/angular/exercices/services-1/server.js b/javascript/angular/exercices/services-1/server.js
new file mode 100644
index 0000000..501bfe1
--- /dev/null
+++ b/javascript/angular/exercices/services-1/server.js
@@ -0,0 +1,52 @@
+var http = require('http');
+
+var server = http.createServer(function(req, res) {
+
+ res.setHeader('Content-Type', 'application/json; charset=utf8');
+ res.setHeader('Access-Control-Allow-Origin', '*');
+
+ if(req.method === 'OPTIONS') {
+ res.setHeader('Access-Control-Allow-Methods', 'POST');
+ res.setHeader('Access-Control-Allow-Headers', 'accept, content-type');
+ res.statusCode = 200;
+ return res.end();
+ }
+
+ if(req.method !== 'POST') {
+ res.statusCode = 400;
+ var content = JSON.stringify({message: "Méthode HTTP invalide !"}, null, 2);
+ return res.end( );
+ }
+
+ var data = '';
+
+ req.on('data', function(chunk) { data += chunk; });
+ req.once('end', function() {
+
+ try {
+ var obj = JSON.parse(data);
+ console.log('Données reçues', obj);
+ res.statusCode = 200;
+ return res.end(JSON.stringify({message: "OK"}, null, 2));
+ } catch(err) {
+ res.statusCode = 400;
+ var content = JSON.stringify({message: "Format des données invalide !"}, null, 2);
+ return res.end(content);
+ }
+
+ });
+
+
+
+});
+
+server.listen(3000, function(err) {
+
+ if(err) {
+ console.error(err.stack);
+ return process.exit(1);
+ }
+
+ console.log('Listening on http://localhost:3000');
+
+});
diff --git a/javascript/angular/exercices/services-2/app.js b/javascript/angular/exercices/services-2/app.js
new file mode 100644
index 0000000..0a81516
--- /dev/null
+++ b/javascript/angular/exercices/services-2/app.js
@@ -0,0 +1,23 @@
+/*
+ * Énoncé:
+ * Implémenter le service "myPrompt" qui pose une question et retourne la réponse entrée par l'utilisateur.
+ * Le service devra lui même utiliser le service $window, service "alias" de l'objet Window fourni par Angular et sa méthode
+ * prompt().
+ *
+ * Documentation:
+ * - Service $window: https://code.angularjs.org/1.3.15/docs/api/ng/service/$window
+ * - window.prompt(): https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt
+ *
+ *
+ */
+
+var Exo = angular.module('Exo', []);
+
+Exo.controller('MainCtrl', ['$scope', /*'myPrompt',*/ function($scope /*,myPrompt*/) {
+
+ $scope.question = 'Quel est votre age ?';
+ $scope.response = '--';
+
+ // scope.response = myPrompt.ask($scope.question);
+
+}]);
diff --git a/javascript/angular/exercices/services-2/index.html b/javascript/angular/exercices/services-2/index.html
new file mode 100644
index 0000000..6e2da8e
--- /dev/null
+++ b/javascript/angular/exercices/services-2/index.html
@@ -0,0 +1,20 @@
+
+
+
+ Exercice: création de service
+
+
+
+
+
+
+
+
+ Votre réponse:{{ response }}
+
+
+
+
+
+
+
diff --git a/javascript/angular/index.html b/javascript/angular/index.html
index ae48d03..cc01570 100644
--- a/javascript/angular/index.html
+++ b/javascript/angular/index.html
@@ -20,6 +20,8 @@
'scope-2',
'scope-3',
'scope-4',
+ 'services-1',
+ 'services-2',
'licence'
];
diff --git a/javascript/angular/plan.md b/javascript/angular/plan.md
index 0fbb18d..f2eb691 100644
--- a/javascript/angular/plan.md
+++ b/javascript/angular/plan.md
@@ -30,9 +30,9 @@
- Utilisation de services
- Création de services personalisés
- Templates et expressions
- - Itération
+ - Itération sur des éléments avec ng-repeat
+ - Réaction aux changements des modèles avec `ng-show`, `ng-hide`, `ng-switch`, `ng-class`
- Inclusion de templates
- - Manipulation des classes
- Les filtres
- Directives
- Animations
diff --git a/javascript/angular/services-1.md b/javascript/angular/services-1.md
new file mode 100644
index 0000000..c5b1797
--- /dev/null
+++ b/javascript/angular/services-1.md
@@ -0,0 +1,31 @@
+# .cadoles-slide-title[Les services (1/)]
+
+- Instanciés à la volée
+- En mode "singleton" _(une seule instance pour l'ensemble de l'application)_
+
+**Injection de dépendances**
+```js
+// Différentes notations
+
+var MyApp = angular.module('MyApp', []);
+
+// La plus classique, via passage de tableau déclarant les dépendances
+// et fonction anonyme en dernier élément
+
+MyApp.controller('FirstCtrl', ['$scope', function($scope) {
+ $scope.myProp = 'foo';
+}]);
+
+// --------------------------
+
+// Via propriété $inject
+
+function SecondCtrl($scope) {
+ $scope.myProp = 'foo';
+}
+// Déclaration des dépendances via la propriété $inject sur le constructeur
+SecondCtrl.$inject = ['$scope'];
+
+// Enregistrement du contrôleur
+MyApp.controller('SecondCtrl', SecondCtrl);
+```
diff --git a/javascript/angular/services-2.md b/javascript/angular/services-2.md
new file mode 100644
index 0000000..c19b6b5
--- /dev/null
+++ b/javascript/angular/services-2.md
@@ -0,0 +1,36 @@
+# .cadoles-slide-title[Les services (2/)]
+
+**Création de services**
+
+.cadoles-xs[
+```js
+
+var MyApp = angular.module('MyApp', []);
+
+// Création d'un service via une fonction génératrice (la plus classique)
+
+MyApp.factory('myService', ['$http', function($http) {
+
+ var myServiceAPI = {
+
+ myServiceMethod: function() {
+ console.log('Foo !');
+ }
+
+ };
+
+ return myServiceAPI;
+
+}]);
+
+// Via un constructeur
+
+MyApp.service('myOtherService', ['$http', function($http) {
+
+ this.myServiceMethod = function() {
+ console.log('Foo !');
+ };
+
+}]);
+```
+]