Ajout exo services
This commit is contained in:
parent
7cbddf946d
commit
a6f66208f9
|
|
@ -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
|
||||
};
|
||||
|
||||
}]);
|
||||
|
|
@ -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>
|
||||
|
|
@ -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');
|
||||
|
||||
});
|
||||
|
|
@ -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);
|
||||
|
||||
}]);
|
||||
|
|
@ -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>
|
||||
|
|
@ -20,6 +20,8 @@
|
|||
'scope-2',
|
||||
'scope-3',
|
||||
'scope-4',
|
||||
'services-1',
|
||||
'services-2',
|
||||
'licence'
|
||||
];
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
```
|
||||
|
|
@ -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 !');
|
||||
};
|
||||
|
||||
}]);
|
||||
```
|
||||
]
|
||||
Loading…
Reference in New Issue