Cadoles
/
formations
20
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Ajout exo services

This commit is contained in:
William Petit 2015-04-07 22:38:36 +02:00
parent 4df20d8adf
commit de745ba6df
9 changed files with 223 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
javascript/angular/exercices/services-1/app.js vendored Normal file
View File

@ -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
};
}]);

30
javascript/angular/exercices/services-1/index.html Normal file
View File

@ -0,0 +1,30 @@
<html>
<head>
<meta charset="utf8">
<title>Exercice: utilisation de service</title>
</head>
<!-- Déclaration de l'application -->
<body ng-app="Exo">
<div ng-controller="MainCtrl">
<label>Nom</label>
<input type="text" ng-model="data.nom" />
<br />
<label>Prénom</label>
<input type="text" ng-model="data.prenom" />
<br />
<label>Age</label>
<input type="number" ng-model="data.age" />
<br />
<button>Envoyer</button>
</div>
<!-- Import de du framework Angular -->
<script src="../node_modules/angular/angular.js"></script>
<script src="app.js"></script>
</body>
</html>

52
javascript/angular/exercices/services-1/server.js vendored Normal file
View File

@ -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');
});

23
javascript/angular/exercices/services-2/app.js vendored Normal file
View File

@ -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);
}]);

20
javascript/angular/exercices/services-2/index.html Normal file
View File

@ -0,0 +1,20 @@
<html>
<head>
<meta charset="utf8">
<title>Exercice: création de service</title>
</head>
<!-- Déclaration de l'application -->
<body ng-app="Exo">
<div ng-controller="MainCtrl">
<label>Question</label>
<input type="text" ng-model="question" />
<br />
<b>Votre réponse:</b> <span>{{ response }}</span>
</div>
<!-- Import de du framework Angular -->
<script src="../node_modules/angular/angular.js"></script>
<script src="app.js"></script>
</body>
</html>

2
javascript/angular/index.html
View File

@ -20,6 +20,8 @@
'scope-2', 'scope-2',
'scope-3', 'scope-3',
'scope-4', 'scope-4',
'services-1',
'services-2',
'licence' 'licence'
]; ];
</script> </script>

4
javascript/angular/plan.md
View File

@ -30,9 +30,9 @@
- Utilisation de services - Utilisation de services
- Création de services personalisés - Création de services personalisés
- Templates et expressions - 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 - Inclusion de templates
- Manipulation des classes
- Les filtres - Les filtres
- Directives - Directives
- Animations - Animations

31
javascript/angular/services-1.md Normal file
View File

@ -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);
```

36
javascript/angular/services-2.md Normal file
View File

@ -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 !');
};
}]);
```
]