Appel d'un webservice

Version imprimable

Bonjour à tous,

Je vous expose mon problème. J'interroge un webservice que je l'ai fait avec Laravel et je souhaite l'afficher grâce à Angular.

Voici mon architecture :

app.js

Code:

1
2
3
'use strict';
 
var app = angular.module('firstApp', ['ngRoute']);

index.html

Code:

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
<!DOCTYPE html>
<html>
<head>
	<title>Ang first app</title>
	<!-- scripts -->
	<script type="text/javascript" src='bower_components/angular/angular.js'></script>
	<script type="text/javascript" src='bower_components/angular-route/angular-route.js'></script>
 
	<!-- module -->
	<script type="text/javascript" src='app.js'></script>
	<!-- routing -->
	<!--<script type="text/javascript" src='routing.js'></script>-->
	<!-- Providers -->
	<script type="text/javascript" src='src/services/recetteProvider.js'></script>
	<!-- controllers -->
	<script type="text/javascript" src='src/controllers/recetteController.js'></script>
	<!-- Directives -->
	<!--<script type="text/javascript" src='src/directives/recetteDirective.js'></script>-->
</head>
<body ng-app='firstApp'>
        <div ng-controller="ListRecette">
        	Test : {{ test }} 
            <div ng-repeat="recette in recettes">
           		 <p> titre : {{ recette.id }} </p>
       		</div>
        </div>
</body>
</html>

recetteController.js

Code:

1
2
3
4
5
6
7
8
9
'use strict';
 
app.controller('ListRecette', function ($scope, recetteProvider,$http){
		$scope.test="Bonjour";
		console.log("controller : "+recetteProvider.getRecettes());
		$scope.recettes = "";
		$scope.recettes = recetteProvider.getRecettes();
	})
;

recetteProvider.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
'use strict';
 
app.service('recetteProvider', function($http){
 
	this.getRecettes=function(){
			$http.get("http://localhost/laravel2015/thermomix/public/recette/ws")
					.success(function(data) {
					  	console.log("Provider :"+ data);
					     return data;
				  	})
				  	.error(function(data) {
				  	    return -1;
				  	});
			}
 
});

Tout me semble correct et le console.log de mon provider m'affiche bien les données de mon webservice.

MAIS mon controller est undefinied !!!

Je ne comprends pas pourquoi du tout, sachant que si je ne passe pas par un web service dans mon provider, tout marche :

Code:

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
'use strict';
 
var recettes = [
{
	'id':1, 
	'nom':'couscous', 
	'description': 'Il faut être un marocain pour faire un couscous :3'
},
 
{
	'id':2, 
	'nom': 'Mini cakes', 
	'description': "Faites fondre le beurre sur feu doux ....."
},
 
{
	'id':3,
	'nom': 'Poulet basquaise',
	'description':"Faire chauffer 4 cuillères à soupe d'huile dans une cocotte. Y faire dorer les oignons,l'ail pressé, les poivrons taillés en lanières. Laisser cuire 5 min...."
}
];
 
app.service('recetteProvider', function($http){
 
	this.getRecettes=function(){
			return recettes;}
});

Pourtant mon Json est correct...
Merci.

24/09/2015, 20h52
sebpern

infos complémentaires

j'ai mis l'appel du webservice dans le controleur ça marche mais pas dans provider .....

Essayes en résolvant la promesse dans ton contrôleur :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
'use strict';
 
app.controller('ListRecette', function ($scope, recetteProvider){ // l'injection de $http ici est inutile
		$scope.test="Bonjour";
		console.log("controller : "+recetteProvider.getRecettes());
		//$scope.recettes = ""; // cette ligne est inutile
 
                recetteProvider.getRecettes().then(function(data) {
                  console.log("Provider :"+ data);
                  $scope.recettes = data;
                }, function(data) {
                  // traiter l'erreur (message, redirection, ...)
                });
	})
;

Code:

1
2
3
4
5
6
7
8
9
10
 
'use strict';
 
app.service('recetteProvider', function($http){
 
	this.getRecettes=function(){
			$http.get("http://localhost/laravel2015/thermomix/public/recette/ws");
			}
 
});

Il n'y a pas de port dans l'url de ton webservice c'est normal ?

25/09/2015, 16h02
sebpern

Déjà merci de ta réponse.

Pour le web service pas de souci je pense, sinon je l'ai mis en ligne http://djaz-seb.com/laravel/public/recette/ws

Pour ce qui est de ta proposition, voici l'erreur :

Code:

TypeError: Cannot read property 'then' of undefined

Pardon j'ai oublié le return :

Code:

1
2
3
4
5
6
7
8
 
'use strict';
 
app.service('recetteProvider', function($http){
    this.getRecettes=function(){
        return $http.get("http://localhost/laravel2015/thermomix/public/recette/ws");
    }
});

25/09/2015, 17h40
sebpern

Merci ça marche, juste dans mon controler :

Code:

$scope.recettes = data.data;

Par contre toujours pas compris pourquoi ce que je faisais ne marchait pas.

En tout cas encore merci de m'avoir aidé !

Parce que au moment où ton getRecettes() était exécuté la promesse n'était pas encore résolue.

Essayes d'exécuter ce code dans ton contexte de départ tu vas comprendre :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
'use strict';
 
app.service('recetteProvider', function($http){
 
	this.getRecettes=function(){
		  	console.log("getRecettes > start");
 
			$http.get("http://localhost/laravel2015/thermomix/public/recette/ws")
					.success(function(data) {
					  	console.log("getRecettes > promise > success");
					     return data;
				  	})
				  	.error(function(data) {
					  	console.log("getRecettes > promise > error");
				  	    return -1;
				  	});
			}
 
		  	console.log("getRecettes > end");
 
});

25/09/2015, 18h06
sebpern

J'ai compris , merci !

La classe d'avoir pris le temps pour moi super, et l'explication est NICKEL !