From de745ba6dfb527e5afc93c7aedce2bfff635b893 Mon Sep 17 00:00:00 2001 From: William Petit Date: Tue, 7 Apr 2015 22:38:36 +0200 Subject: [PATCH] Ajout exo services --- .../angular/exercices/services-1/app.js | 27 ++++++++++ .../angular/exercices/services-1/index.html | 30 +++++++++++ .../angular/exercices/services-1/server.js | 52 +++++++++++++++++++ .../angular/exercices/services-2/app.js | 23 ++++++++ .../angular/exercices/services-2/index.html | 20 +++++++ javascript/angular/index.html | 2 + javascript/angular/plan.md | 4 +- javascript/angular/services-1.md | 31 +++++++++++ javascript/angular/services-2.md | 36 +++++++++++++ 9 files changed, 223 insertions(+), 2 deletions(-) create mode 100644 javascript/angular/exercices/services-1/app.js create mode 100644 javascript/angular/exercices/services-1/index.html create mode 100644 javascript/angular/exercices/services-1/server.js create mode 100644 javascript/angular/exercices/services-2/app.js create mode 100644 javascript/angular/exercices/services-2/index.html create mode 100644 javascript/angular/services-1.md create mode 100644 javascript/angular/services-2.md 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 !'); + }; + +}]); +``` +]