Service et $http

**kalare** · 14/10/2015, 16h13

Bonjour,

Je débute dans AngularJS et je n'arrive pas à faire marcher un service qui fait appel à l'intérieur du $http.

Pouvez-vous me dire s'il est possible de faire un service qui fait appel à une requête post avec $http ?

Voici mes message d'erreur :

Error: ServiceRecordMembres is not defined
$scope.MyRecordMembreAAA@http://127.0.0.1/site1-projet-en-commun/controller/controllerInscriptionMembres.js:10:1
anonymous/fn@http://127.0.0.1/site1-projet-en-commun/api/bower_components/angular/angular.js line 13231 > Function:2:239
ngEventHandler/</callback@http://127.0.0.1/site1-projet-en-commun/api/bower_components/angular/angular.js:23371:17
$RootScopeProvider/this.$get</Scope.prototype.$eval@http://127.0.0.1/site1-projet-en-commun/api/bower_components/angular/angular.js:15878:16
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://127.0.0.1/site1-projet-en-commun/api/bower_components/angular/angular.js:15978:20
ngEventHandler/<@http://127.0.0.1/site1-projet-en-commun/api/bower_components/angular/angular.js:23376:17
jQuery.event.dispatch@http://127.0.0...dist/jquery.js:4434:15
jQuery.event.add/elemData.handle@http://127.0.0.1/site1-projet-en-commun/api/bower_components/jquery/dist/jquery.js:4121:6

Merci.

**slim** · 14/10/2015, 16h55

Salut!

Comment as-tu écris ton service ?

Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
(function() {    
    angular.module('myapp').factory('MyService', MyService);
    MyService.$inject = ['$http'];
    function MyService($http) {
      $http.post(......, function(....){......});
    }
})();

**kalare** · 14/10/2015, 18h22

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
'use strict';
myApp.service("ServiceRecordMembres", function($scope) {
    this.MyRecordNewUser = function() {
        $http.post("http://127.0.0.1/site1-projet-en-commun/server/mysql/SQLRecordMembres.php", {
            DbNom: "$scope.inputNom",
            DbPrenom: "$scope.inputPrenom",
            DbDateDeNaissance: "$scope.inputDateDeNaissance",
            DbCodePostale: "$scope.inputCodePostale",
            DbVille: "$scope.inputVille",
            DbPays: "$scope.inputPays",
            DbAdressePostale: "$scope.inputAdressePostale",
            DbEmail: "$scope.inputEmail",
            DbTelephone: "$scope.inputTelephone",
            DbIdentifiant: "$scope.inputIdentifiant",
            DbPasse: "$scope.inputMotDePasse"
        }).
        success(function(data, status) {
            document.getElementById("info").innerHTML = "Ca marche !"
        }).
        error(function(data, status) {
            document.getElementById("erreur").innerHTML = "Erreur lors de l'envoi"
        });
    }
});

**slim** · 14/10/2015, 22h03

Et j'imagine que tu l'appelle depuis un contrôleur ? comment ?
et $scope n'a rien à faire dans les valeurs des propriétés de ton objet...
Ce n'est pas de cette façon qu'on fait le bind dans AngularJS. Je te conseillerai un peu de lecture

Si tu lis juste cela, je pense que tu pourrais régler ton problème.

**kalare** · 15/10/2015, 14h50

Salut,

Merci mais je ne connais pas l'anglais.
Et la traduction de Google est parfois de mauvaise qualité.

Une toute petit question : c'est possible de mettre un $http dans un service qui est appelé dans un controller ?

Merci pour la documentation, je vais m'y mettre. Enfin, je vais essayer car je ne connais pas l'anglais.

**slim** · 15/10/2015, 15h25

Envoyé par kalare

mes je ne connais pas l'anglais

Il existe de nombreux articles et tutoriaux sur le fwk en français.

ton moteur de recherche préféré.

Envoyé par kalare

une toute petit question : c'est possible de mettre un $http dans un service qui est appeler dans un controller.

Oui, c'est possible. mais tu n'injecte pas $scope dans le service. Ce que tu injecte, c'est seulement le service $http.
Il faut voir le service comme un "service métier" qui n'a aucun rapport avec la gestion du DOM.

En paramètre de la methode de ton service, ne passe pas toutes les propriétés mais qu'un seul objet.
Tu peux charger cet objet depuis le serveur, le manipuler dans le contrôleur et le template et le renvoyer enfin au serveur au travers de ton service.

Poste ton exemple complet une fois que tu aura fais les modifs et si tu rencontre encore des pbs.

**kalare** · 15/10/2015, 18h43

Salut,

J'ai testé différents codes et fais des recherches sur Google mais je ne trouve pas la solution.

Donc voici mon code :

app.html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<html>
<head>
<title>app test2</title>
<meta charset="UTF-8">
 
 
<script type="text/javascript" src="api/bower_components/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="api/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="api/bower_components/bootstrap/dist/css/bootstrap.css">
 
<script type="text/javascript" src="api/bower_components/angular/angular.js"></script>
 
 
<!-- mes code source perso -->
 
 
 
<script type="text/javascript" src="./app.js"></script>
 
<script type="text/javascript" src="./service/serviceRecordData.js"></script>
<script type="text/javascript" src="./controller/controllerInscriptionMembres.js"></script>
 
<!--<script type="text/javascript" src="./service/serviceEnvoiMembre.js"></script>-->
 
 
<!--<script type="text/javascript" src="./factory/factoryMysql.js"></script>-->
<script type="text/javascript" src="./factory/testa.js"></script>
 
 
 
 
 
 
</head>
<body ng-app="myApp">
 
<br><br><br><br><br>
 
 
  <div class="form-group">
 
    <div class="col-sm-offset-3 col-sm-10">
<h3>Formulaire d'inscription pour devenir Membres </h3>
 
<p>&nbsp;</p><p>&nbsp;</p>
 
    </div>
  </div>
<div id="info" name="info">
 
</div>
 
 
<div ng-controller="ctrlmembreInscription">
 
<form class="form-horizontal" ng-submit="MyRecordMembre()"> 
 
  <div class="form-group">
    <label for="inputNom" class="col-sm-4 control-label">Nom</label>
    <div class="col-sm-3">
      <input type="inputNom" class="form-control" id="inputNom" ng-model="NewUser.inputNom" placeholder="Nom"> 
  	  {{ inputNom }}
 
 
	  </div>
  </div>
 
<div class="form-group">
    <label for="inputPrenom" class="col-sm-4 control-label">Prenom</label>
    <div class="col-sm-3">
      <input type="inputPrenom" class="form-control" id="inputPrenom" ng-model="NewUser.inputPrenom" placeholder="Prenom">
    </div>
  </div>
 
<div class="form-group">
    <label for="inputDateDeNaissance" class="col-sm-4 control-label">Date de naissance</label>
    <div class="col-sm-3">
      <input type="inputDateDeNaissance" class="form-control" id="inputDateDeNaissance" ng-model="NewUser.inputDateDeNaissance" 
      placeholder="Date de  naissance">
    </div>
  </div>
 
<div class="form-group">
    <label for="inputCodePostale" class="col-sm-4 control-label">Code Postale</label>
    <div class="col-sm-3">
      <input type="inputCodePostale" class="form-control" id="inputCodePostale" ng-model="NewUser.inputCodePostale" placeholder="Code Postale">
    </div>
  </div>
 
<div class="form-group">
    <label for="inputVille" class="col-sm-4 control-label">Ville</label>
    <div class="col-sm-3">
      <input type="inputVille" class="form-control" id="inputVille" ng-model="NewUser.inputVille" placeholder="Ville">
    </div>
  </div>
 
<div class="form-group">
    <label for="inputPays" class="col-sm-4 control-label">Pays</label>
    <div class="col-sm-3">
      <input type="inputPays" class="form-control" id="inputPays" ng-model="NewUser.inputPays" placeholder="Pays">
    </div>
  </div>
 
<div class="form-group">
    <label for="inputAdressePostale" class="col-sm-4 control-label">Adresse Postale</label>
    <div class="col-sm-3">
      <input type="inputAdressePostale" class="form-control" id="inputAdressePostale" ng-model="NewUser.inputAdressePostale" placeholder="Adresse Postale">
    </div>
  </div>
 
 
<div class="form-group">
    <label for="inputEmail" class="col-sm-4 control-label">Email</label>
    <div class="col-sm-3">
      <input type="inputEmail" class="form-control" id="inputEmail" ng-model="NewUser.inputEmail" placeholder="Email">
    </div>
  </div>
 
<div class="form-group">
    <label for="inputTelephone" class="col-sm-4 control-label">Téléphone</label>
    <div class="col-sm-3">
      <input type="inputTelephone" class="form-control" id="inputTelephone" ng-model="NewUser.inputTelephone" placeholder="Telephone">
    </div>
  </div>
 
<div class="form-group">
    <label for="inputIdentifiant" class="col-sm-4 control-label">Identifiant </label>
    <div class="col-sm-3">
      <input type="inputIdentifiant" class="form-control" id="inputIdentifiant" ng-model="NewUser.inputIdentifiant" placeholder="Identifiant">
    </div>
  </div>
 
<div class="form-group">
    <label for="inputMotDePasse" class="col-sm-4 control-label">Mot de Passe</label>
    <div class="col-sm-3">
      <input type="inputMotDePasse" class="form-control" id="inputMotDePasse" ng-model="NewUser.inputMotDePasse" placeholder="Mot de passe">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-4 col-sm-10">
 
 
          <input type="checkbox" id="checkboxEmail" ng-model="NewUser.checkboxEmail">
        <label for="checkboxEmail"><h6>j'accepte de recevoir des email de votre part.</h6></label>
      </div>
 
  </div>
  <div class="form-group">
    <div class="col-sm-offset-4 col-sm-10">
      <button type="submit" class="btn btn-default">Inscription</button>
    </div>
  </div>
</form>
</div>
</body>
</html>

app.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
'use strict';
 
var myApp = angular.module('myApp', []);

serviceRecordData.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
 
'use strict';
 
myApp.service ("ServiceRecordMembres", function($scope, $http){
 
// Ce service va envoyer les donnees dans une base de donnees MYSQL
 
this.MyRecordNewUser = function (){
 
		    $http.post("http://127.0.0.1/site1-projet-en-commun/server/mysql/SQLRecordMembres.php", 
	{
	DbNom:"$scope.inputNom",
	DbPrenom:"$scope.inputPrenom",
	DbDateDeNaissance:"$scope.inputDateDeNaissance",
	DbCodePostale:"$scope.inputCodePostale",
	DbVille:"$scope.inputVille",
	DbPays:"$scope.inputPays",
	DbAdressePostale:"$scope.inputAdressePostale",
	DbEmail:"$scope.inputEmail",
	DbTelephone:"$scope.inputTelephone",
	DbIdentifiant:"$scope.inputIdentifiant",
	DbPasse:"$scope.inputMotDePasse"
 
	}
).
    success(function(data, status) {
   	document.getElementById("info").innerHTML = "Ca marche !"
    }).
    error(function(data, status) {
   	document.getElementById("erreur").innerHTML = "Erreur lors de l'envoi"
    });
 
}
 
 
}
 
 
);
 
 
 
 
 
 
 
 
	/*
	    $http.post("http://127.0.0.1/site1-projet-en-commun/server/mysql/SQLRecordMembres.php", 
	{
	DbNom:$scope.inputNom,
	DbPrenom:$scope.inputPrenom,
	DbDateDeNaissance:$scope.inputDateDeNaissance,
	DbCodePostale:$scope.inputCodePostale,
	DbVille:$scope.inputVille,
	DbPays:$scope.inputPays,
	DbAdressePostale:$scope.inputAdressePostale,
	DbEmail:$scope.inputEmail,
	DbTelephone:$scope.inputTelephone,
	DbIdentifiant:$scope.inputIdentifiant,
	DbPasse:$scope.inputMotDePasse
 
	}).
    success(function(data, status) {
    	document.getElementById("info").innerHTML = "Ca marche !"
    }).
    error(function(data, status) {
    	document.getElementById("erreur").innerHTML = "Erreur lors de l'envoi"
    });
 
 
 
	*/

controllerInscriptionMembres.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
'use strict';
 
 
myApp.controller ("ctrlmembreInscription", ["$scope", "$http", function ($scope, $http){
 
 
 
 
	$scope.MyRecordMembre = function (){
 
 
		ServiceRecordMembres.MyRecordNewUser();
 
 
 
 
 
	    $http.post("http://127.0.0.1/site1-projet-en-commun/server/mysql/SQLRecordMembres.php", 
	{
	DbNom:"$scope.inputNomAAAAAAAAAAAAAAAAA",
	DbPrenom:"$scope.inputPrenom",
	DbDateDeNaissance:"$scope.inputDateDeNaissance",
	DbCodePostale:"$scope.inputCodePostale",
	DbVille:"$scope.inputVille",
	DbPays:"$scope.inputPays",
	DbAdressePostale:"$scope.inputAdressePostale",
	DbEmail:"$scope.inputEmail",
	DbTelephone:"$scope.inputTelephone",
	DbIdentifiant:"$scope.inputIdentifiant",
	DbPasse:"$scope.inputMotDePasse"
 
	}
).
    success(function(data, status) {
     }).
    error(function(data, status) {
 
    });
 
 
 
	} // fin de la fonction 
 
 
 
 
 
 
 
}]);

Merci de votre aide.

**slim** · 16/10/2015, 13h29

Tu n'as pas essayé d'appliquer ce que je t'ai proposé dans mes posts précédents...

**kalare** · 17/10/2015, 18h33

salut

j'ai tester le maximum de code et toujours rien...

une aide un indice

le problème ne viens pas de l'api de jquery qui est importer avec boostrap et angularjs ?

dou peu bien venir le problème?

**kalare** · 17/10/2015, 19h17

re re salut

j'ai du mal a comprendre .

comment ce fait il que le "$http.post" marche dans un controller mes que ca ne marche pas sur un service .

**slim** · 18/10/2015, 19h23

OK. Je vais te donner juste le schéma à suivre mais pas la solution !
Et dans ma réponse, il y aura plusieurs indices

Les services dans AngularJS (service, factory... lien pour plus d'explications) représentent la couche Model (accès aux données...). Ils peuvent exposer des méthodes qui chargeront les données et les renverront sous forme d'objet JSON ou de promesses (tout dépend comment tu les appelle) et d'autres méthodes d'enregistrement à l'aide du service $http.
Exemple de service :

Ce code est à améliorer... Je l'ai juste pris sur internet... Je te conseillerai de lire ceci (angular style guide).

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
app.factory("factoryContacts",['$http', function($http){
        return {
            getContacts: function(){
               return $http({
                    method: 'GET',
                    url:'/rest/listContacts'
                }).then(function(response) {
                    //......
                    return response.contacts;
                 });
            },
            saveContacts: function(contacts){
                return $http.post('rest/contacts', contacts).then(function(response){
                    return response.status;
                });
            }
 
        };
   }]);

tu peux aussi utiliser la méthode get directement. C'est la même chose pour post etc.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$http.get('/rest/listContacts').then(...);

Tu remarquera qu'on retourne une promesse et que dans l'url, je n'ai pas mis le domaine (localhost).

Une fois ceci fait, tu crée un contrôleur dans lequel tu vas injecter ton service. Le service que tu viens de créer.
C'est là que tu vas injecter le service $scope qui représente le scope de ton contrôleur.
Tu vas donc enregistrer l'objet renvoyé par le service dans le $scope du contrôleur.

la doc : là (ceci dit, faut vraiment faire les tutos et guides sur le site officiel...).

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function ContactsCtrl($scope, factoryContacts) {   
    factoryContacts.contactsList().then(function(res){
       $scope.contacts = res.contacts;
    }
}

Ce code est à refactorer. Jette un coup d'œil au "styleguide".
Puis dans le template, tu utilise l'objet contacts directement.

Fais ça, et on voit si t'avance ou pas...

**kalare** · 20/10/2015, 20h38

Salut et merci de ton aide précieuse.

Je suppose que l'un des problèmes était que pour le post l'url était une url absolue genre : www.domaine.fr/dossier/etc/.

Alors qu'il fallait mettre une url du genre /dossier/etc/fichier.php.

Ensuite, le problème suivant est que l'injection de dépendance est limitée dans les service et controller.
Pour ceux que ça intéresse voici le code source.

app.html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
 
<html>
<head>
<title>app test2</title>
<meta charset="UTF-8">
 
<!--
<script type="text/javascript" src="api/bower_components/jquery/dist/jquery.js"></script>
-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="api/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="api/bower_components/bootstrap/dist/css/bootstrap.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
 
 
 
 
 
 
 
<!-- mes code source perso -->
 
 
 
<script type="text/javascript" src="./app.js"></script>
<script type="text/javascript" src="./service.js"></script>
<script type="text/javascript" src="./controller.js"></script>
 
 
 
<!--<script type="text/javascript" src="./service/serviceEnvoiMembre.js"></script>-->
 
 
<!--<script type="text/javascript" src="./factory/factoryMysql.js"></script>-->
 
 
 
 
 
 
</head>
<body ng-app="app">
 
<br><br><br><br><br>
 
 
  <div class="form-group">
 
    <div class="col-sm-offset-3 col-sm-10">
<h3>Formulaire d'inscription pour devenir Membres </h3>
 
<p>&nbsp;</p><p>&nbsp;</p>
 
    </div>
  </div>
<div id="info" name="info">
 
</div>
 
 
 
<div ng-controller="ControllerA">
 
<form class="form-horizontal" name="NewMembre" ng-submit="RecordUserForm(NewMembre)"> 
 
  <div class="form-group">
    <label for="inputNom" class="col-sm-4 control-label">Nom</label>
    <div class="col-sm-3">
      <input type="inputNom" class="form-control" id="NewMembre.Nom" ng-model="NewMembre.Nom" placeholder="Nom"> 
 
	  </div>
  </div>
 
<div class="form-group">
    <label for="inputPrenom" class="col-sm-4 control-label">Prenom</label>
    <div class="col-sm-3">
      <input type="NewMembre.Prenom" class="form-control" id="NewMembre.Prenom" ng-model="NewMembre.Prenom" placeholder="Prenom">
    </div>
  </div>
 
<div class="form-group">
    <label for="inputDateDeNaissance" class="col-sm-4 control-label">Date de naissance</label>
    <div class="col-sm-3">
      <input type="inputDateDeNaissance" class="form-control" id="NewMembre.DateDeNaissance" ng-model="NewMembre.DateDeNaissance" 
      placeholder="Date de  naissance">
    </div>
  </div>
 
<div class="form-group">
    <label for="inputCodePostale" class="col-sm-4 control-label">Code Postale</label>
    <div class="col-sm-3">
      <input type="inputCodePostale" class="form-control" id="NewMembre.CodePostale" ng-model="NewMembre.CodePostale" placeholder="Code Postale">
    </div>
  </div>
 
<div class="form-group">
    <label for="inputVille" class="col-sm-4 control-label">Ville</label>
    <div class="col-sm-3">
      <input type="inputVille" class="form-control" id="NewMembre.Ville" ng-model="NewMembre.Ville" placeholder="Ville">
    </div>
  </div>
 
<div class="form-group">
    <label for="inputPays" class="col-sm-4 control-label">Pays</label>
    <div class="col-sm-3">
      <input type="inputPays" class="form-control" id="NewMembre.Pays" ng-model="NewMembre.Pays" placeholder="Pays">
    </div>
  </div>
 
<div class="form-group">
    <label for="inputAdressePostale" class="col-sm-4 control-label">Adresse Postale</label>
    <div class="col-sm-3">
      <input type="inputAdressePostale" class="form-control" id="NewMembre.AdressePostale" ng-model="NewMembre.AdressePostale" placeholder="Adresse Postale">
    </div>
  </div>
 
 
<div class="form-group">
    <label for="inputEmail" class="col-sm-4 control-label">Email</label>
    <div class="col-sm-3">
      <input type="inputEmail" class="form-control" id="NewMembre.Email" ng-model="NewMembre.Email" placeholder="Email">
    </div>
  </div>
 
<div class="form-group">
    <label for="inputTelephone" class="col-sm-4 control-label">Téléphone</label>
    <div class="col-sm-3">
      <input type="inputTelephone" class="form-control" id="NewMembre.Telephone" ng-model="NewMembre.Telephone" placeholder="Telephone">
    </div>
  </div>
 
<div class="form-group">
    <label for="inputIdentifiant" class="col-sm-4 control-label">Identifiant </label>
    <div class="col-sm-3">
      <input type="inputIdentifiant" class="form-control" id="NewMembre.Identifiant" ng-model="NewMembre.Identifiant" placeholder="Identifiant">
    </div>
  </div>
 
<div class="form-group">
    <label for="inputMotDePasse" class="col-sm-4 control-label">Mot de Passe</label>
    <div class="col-sm-3">
      <input type="NewMembre.MotDePasse" class="form-control" id="NewMembre.MotDePasse" ng-model="NewMembre.MotDePasse" placeholder="Mot de passe">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-4 col-sm-10">
 
 
          <input type="checkbox" id="checkboxEmail" ng-model="NewMembre.checkboxEmail">
        <label for="checkboxEmail"><h6>j'accepte de recevoir des email de votre part.</h6></label>
      </div>
 
  </div>
  <div class="form-group">
    <div class="col-sm-offset-4 col-sm-10">
      <button type="submit" class="btn btn-default">Inscription</button>
    </div>
  </div>
</form>
</div>
</body>
</html>

controller.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
'use strict';
 
 
//app.controller ('ControllerA', function (monService, $scope){
 
app.controller ('ControllerA',  function (monService, $scope){
 
 
 
 
 
$scope.RecordUserForm = function (NewMembre){
 
monService.RecordUser(NewMembre);
 
 
/*
	    $http.post("http://127.0.0.1/site1-projet-en-commun/server/mysql/SQLRecordMembres.php", 
	{
	DbNom:"$scope.inputNom",
	DbPrenom:"$scope.inputPrenom",
	DbDateDeNaissance:"$scope.inputDateDeNaissance",
	DbCodePostale:"$scope.inputCodePostale",
	DbVille:"$scope.inputVille",
	DbPays:"$scope.inputPays",
	DbAdressePostale:"$scope.inputAdressePostale",
	DbEmail:"$scope.inputEmail",
	DbTelephone:"$scope.inputTelephone",
	DbIdentifiant:"$scope.inputIdentifiant",
	DbPasse:"$scope.inputMotDePasse"
 
	}).
    success(function(data, status) {
    	document.getElementById("info").innerHTML = "Ca marche !"
    }).
    error(function(data, status) {
    	document.getElementById("erreur").innerHTML = "Erreur lors de l'envoi"
    });
 
*/
 
//ServiceA.methodeRecord();
}
 
 
 
 
 
 
});

service.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
'use strict';
 
 
//app.service ('monService', function ($http){
 
 
app.service ('monService', function ($http){
 
 
 
this.RecordUser = function (NewMembre){
 
 
 
var data = {
	DbNom:NewMembre.Nom,
	DbPrenom:NewMembre.Prenom,
	DbDateDeNaissance:NewMembre.DateDeNaissance,
	DbCodePostale:NewMembre.CodePostale,
	DbVille:NewMembre.Ville,
	DbPays:NewMembre.Pays,
	DbAdressePostale:NewMembre.AdressePostale,
	DbEmail:NewMembre.Email,
	DbTelephone:NewMembre.Telephone,
	DbIdentifiant:NewMembre.Identifiant,
	DbPasse:NewMembre.MotDePasse
	};
 
//var data = {DbNom:NewMembre.Nom, DbPrenom:'Prenom nnnnOOOOOOOOO'};
 
 
 
 
$http.post('./server/mysql/SQLRecordMembres.php', data).then();
 
 
}
 
 
});

server/mysql/SQLRecordMembres.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
 
<?php
 
function RecordMembre ($Connexion, $Nom, $Prenom, $DateDeNaissance, $CodePostale, $Ville, $Pays, $AdressePostale, $Email, $Telephone, $identifiant, $passe){
 
 
$host = "localhost";
$port = "";
$nom_bd = "projetcommundb";
$user = "root";
$pass = "";
 
 
$Table = "lesmembres";
 
try {
$connexion = new PDO('mysql:host='.$host.';port='.$port.';dbname='.$nom_bd,
$user, $pass);
}
catch (Exception $e){
echo "erreur : ".$e->getMessage()."<br />";
echo "Numero : ".$e->getCode ();
 
}
 
$requete = "INSERT INTO ".$Table." (Nom, Prenom, DateDeNaissance, CodePostale, Ville, Pays, AdressePostale, Email, Telephone, identifiant, passe) 
VALUES ('".$Nom."', '".$Prenom."', '".$DateDeNaissance."', '".$CodePostale."', '".$Ville."', '".$Pays."', '".$AdressePostale."', 
'".$Email."', 
'".$Telephone."', 
'".$identifiant."', 
'".$passe."'
)";
$resultats=$connexion->query($requete);
 
 
 
 
 
}
 
$postdata = file_get_contents("php://input");
$request = json_decode($postdata);
//$NomMembre = $request->DbNom;
//$pass = $request->password;
 
 
//
/*
$Connexion = null;
$Nom = $_POST['nom'];
$Prenom = $_POST['prenom'];
$DateDeNaissance = $_POST['datedenaissance'];
$CodePostale = $_POST['codepostale'];
$Ville = $_POST['ville'];
$Pays = $_POST['pays'];
$AdressePostale = $_POST['adressepostale'];
// $Email = $_POST['email'];
$Telephone = $_POST['telephone'];
$identifiant = $_POST['identifiant'];
$passe = $_POST['passe'];
*/
 
////////////////////////////////////////////
 
 
 
 
RecordMembre ($Connexion, $request->DbNom, $request->DbPrenom, $request->DbDateDeNaissance, $request->DbCodePostale, $request->DbVille, $request->DbPays, 
$request->DbAdressePostale, $request->DbEmail, $request->DbTelephone, $request->DbIdentifiant, $request->DbPasse);
 
 
 
 
 
 
 
//RecordMembre ($Connexion, $Nom, $Prenom, $DateDeNaissance, $CodePostale, $Ville, $Pays, $AdressePostale, $Email, $Telephone, $identifiant, $passe);
 
?>

Encore une fois, un grand merci de votre aide et peut être à bientôt.

Service et $http

AngularJS

Discussions similaires

Partager

Partager