Appel d'un webservice

**sebpern** · 24/09/2015, 19h37

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 :

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

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

index.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
<!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 :

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

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 :

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
'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 :

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
'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.

**sebpern** · 24/09/2015, 20h52

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

**Marco46** · 25/09/2015, 11h41

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

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
 
'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 :

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

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 ?

**sebpern** · 25/09/2015, 16h02

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 :

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

TypeError: Cannot read property 'then' of undefined

**Marco46** · 25/09/2015, 16h33

Pardon j'ai oublié le return :

Code :

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

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");
    }
});