Angular, première partie

2015-04-08 23:22:53 +02:00
parent a6f66208f9
commit 18aec7b86f
32 changed files with 585 additions and 35 deletions
--- a/javascript/angular/exercices/services-1/.solution/app.js
+++ 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);
+      })
+    ;
+  };
+
+}]);
--- a/javascript/angular/exercices/services-1/.solution/index.html
+++ b/javascript/angular/exercices/services-1/.solution/index.html
@ -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 ng-click="sendData()">Envoyer</button>
+  </div>
+
+  <!-- Import de du framework Angular -->
+  <script src="../../node_modules/angular/angular.js"></script>
+  <script src="app.js"></script>
+</body>
+</html>