Discussion :

[clem_alain]

Bonjour,
Lorsque je sélectionne un locataire, je récupère son id, je lance une requête et je récupère l'objet locataire dans lequel il y a notamment l'id_proprietaire
Voici le code du contrôleur :

Code :

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

1
2
3
4
5
6
7
8
9
10
angular.module('appLocations').controller('locataireCtrl', ['$scope', '$routeParams', 'LocationsRest', '$location', function ($scope, $routeParams,LocationsRest, $location) {  
        var loc = LocationsRest.getLocataire().get({id: $scope.id});
        $scope.locataire = loc; // pour la vue
        loc.$promise.then(function(data){
            $scope.LocData=data; // pour pouvoir manipuler les données retournées
            console.log(data); // pour voir si tout est OK
        });
        var idProp = locData.id_proprietaire;
        $scope.selectedOption= LocationsRest.getProprietaire().get({id: idProp});;
    }]);

Ce code ne fonctionne pas car il n'y a rien dans idProp et je ne comprends pas pourquoi !
Précisions :
1 - le getLocataire() fonctionne parfaitement, pour preuve $scope.locataire il est parfaitement visible dans la vue !
2 - lorsque je fais du débogage loc est présenté comme : Loc = (Resource)Resource, idem pour $scope.locataire

Fondamentalement je ne vois pas la différence entre mon code et celui qui est proposé dans la doc AngularJS à cette adresse :
https://docs.angularjs.org/api/ngResource/service/$resource en bas de la page.

Merci d'avance pour votre aide,
P.S. : Marco46, je sais que mon code n'est pas vraiment correct, mais pour le moment je suis en phase d'apprentissage et donc je ne peux pas me permettre une trop grand complexité ;-)

[Marco46]

La ligne qui pose problème :

Code :

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

var idProp = locData.id_proprietaire;

locData n'est déclaré nullepart, donc il est undefined. Donc idProp est undefined.

Je te conseille d'utiliser $http plutôt que $resource, c'est beaucoup plus clair pour apprendre. Personnellement je n'utilise pas $resource, je le trouve extrêmement fouillis à vouloir mélanger accès au données et modèle. Je préfère utiliser Restangular ou directement $http.

[clem_alain]

Bonjour,
En fait c'est un problème de recopie, la ligne réelle était :
var idProp = $scope.locData.id_proprietaire;

J'ai essayé aussi de passer par une variable locale :
var locData;
...
LocData=data;

Mais rien n'y a fait.
du coup j'ai laissé tomber $resource et jai essayé aussi cela avec $http :

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
angular.module("appLocation").factory('dao', ['$http', 'Config', '$q', function ($http, Config, $q) {
        var reponse = '';
        return {
            getLocataire2: getLocataire2, // version2
            getLocataire: getLocataire, // version1
        };
        function getLocataire2(id) {
            var url = Config.urlServeur + '/getLocataire/' + id;
            $http.get(url).success(function (response) {
                reponse = response;
            });           
            return reponse;
        }
 
        function getLocataire(id) {
            var differe = $q.defer();
            var url = Config.urlServeur + '/getLocataire/' + id;
            var promise = $http.get(url);
            promise.then(success, failure);        
            return differe;
 
            function success(response) {
                differe.resolve(reponse.data);
            }
            function failure() {
                differe.resolve("erreur");
            }
        }
    }]);

Bon je suis d'accord que la v2 n'est pas très orthodoxe, mais au final c'est encore celle qui "fonctionne" à peu près !
Dans le contrôleur :

Code :

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

1
2
3
4
5
6
7
    controleurs.controller('LocataireCtrl', ['$scope', '$routeParams', 'OeuvresRest', '$location', 'dao', function ($scope, $routeParams, LocationRest, $location, dao) {
        $scope.locataire = LocationRest.getLocataire().get({id_locataire: $scope.locataire});
        var locataire =  dao.getLocataire2($routeParams.id);
        $scope.proprietaires = LocationRest.listeProprietaires().query();
        if ($scope.id_locataire)
            $scope.selectedOption = LocationRest.getProprietaire().get({id_proprietaire: locataire.id_proprietaire});
	    . . .

Cela ne fonctionne pas, enfin pas vraiment, la première fois je n'obtiens rien, mais si je relance une seconde fois c'est OK et les fois suivantes c'est OK, mais ce n'est pas satisfaisantcomme résultat.
Du coup j'ai essayé ça :

Code :

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

1
2
3
4
5
6
7
8
9
    controleurs.controller('LocataireCtrl', ['$scope', '$routeParams', 'OeuvresRest', '$location', 'dao', function ($scope, $routeParams, LocationRest, $location, dao) {
        $scope.locataire = LocationRest.getLocataire().get({id_locataire: $scope.locataire});
        var locataireP =  dao.getLocataire($routeParams.id); // On récupère une promesse
	var locataire;
	locataireP.promise(function(response){locataire=response;}); // on résout la promesse et j'ai aussi essayé locataireP.promise.then(function ...
        $scope.proprietaires = LocationRest.listeProprietaires().query();
        if ($scope.id_locataire)
            $scope.selectedOption = LocationRest.getProprietaire().get({id_proprietaire: locataire.id_proprietaire});
	    . . .

Toujours rien bien que l'analyse dans le navigateur montre dans les deux cas que le serveur Rest a bien envoyé le JSON !
Je pédale dans la semoule :-(
Merci pour l'aide

[Marco46]

Faut rester simple. Résout la promesse dans ton contrôleur. Aucun intérêt de le faire dans ton service.

Code :

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

1
2
3
4
5
 
function getLocataire2(id) {
    var url = Config.urlServeur + '/getLocataire/' + id;
    return $http.get(url);           
}

Tout simplement.

Et dans ton contrôleur tu résouts la promesse :

Code :

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

1
2
3
4
5
6
7
8
9
 
function locataireCtrl(dao, $routeParams) {
 
    var vm = this;
 
    dao.getLocataire2($routeParams.id).then(function(data) {
        vm.data = data; // à toi de voir comment ça s'emboite, je ne connais ni le modèle renvoyé par ton WS ni les bindings de ta vue.
    });
}

L'implémentation que tu fais dans getLocataire() (la v1 donc) est bonne mais on ne fait ça que si l'on a du traitement à faire avant de renvoyer la promesse. Donc par exemple si tu as un service qui gère l'accès aux webservice, et un autre entre ce service et la vue. Dans ce service passe plat on va pouvoir exécuter des traitements permettant de modifier le modèle (par exemple) ou notifier d'autres services, etc ... dans ce cas on va résoudre la promesse, faire les traitements puis retourner une nouvelle promesse. C'est ce que tu as fait et je vois pas pourquoi ça fonctionnerait pas.

[clem_alain]

Bonjour,
Afin de mieux (tenter) de maîtriser l'outil AngularJs, je repars sur une application plus modeste (les employés et leur service) en me basant sur le célèbre employee/department d'Oracle.
J'ai suivi ton conseil de travailler avec $http, le contrôleur ci-dessous fonctionne parfaitement :

Code :

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

1
2
3
4
5
6
7
8
9
controllers.controller('employeeCtrl', ['$scope', 'EmployeesRest', '$routeParams', '$location', function ($scope, EmployeesRest, $routeParams, $location) {
        var employeeR = EmployeesRest.getEmployee($routeParams.id);
        employeeR.success(function(data){
             $scope.employee = data;
             EmployeesRest.getDepartments().success(function(data){$scope.departments = data;});
             if ($scope.employee_id)
                EmployeesRest.getDepartment($scope.employee.department_id).success(function(data){$scope.selectedOption = data;});
          });
    }]);

Et voici les services appelés :

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
angular.module('app').factory('EmployeesRest', ['$http', 'Config', '$resource',
    function ($http, Config, $resource) {
        var employeesRest = {
            getEmployees: getEmployees,
            getEmployee: getEmployee,
            getDepartments: getDepartments,
            getDepartment: getDepartment
        };
        return employeesRest;
 
        function getEmployees() {
            var url = Config.urlServer + Config.urlgetEmployees;
            return $http.get(url);
        };
        function getEmployee(id) {
            var url = Config.urlServer + Config.urlgetEmployee + id;
            return $http.get(url);
        };
        function getDepartments() {
            var url = Config.urlServer + Config.urlgetDepartments;
            return $http.get(url);
        };
        function getDepartment(id) {
            var url = Config.urlServer + Config.urlgetDepartment + id;
            return $http.get(url, {id: id});
        };
    }]);

Mon problème est le suivant :
Comment arriver à manipuler des données issues d'une Promise en dehors de la fonction success ?
Avec ce que j'ai compris des promise il y a antinomie entre le traitement synchrone séquentiel classique du type : je récupère des données que j'utilise pour accéder à d'autres données et les promises qui consistent à lancer une demande qui sera résolue plus tard et pendant ce temps je continue le déroulement séquentiel de l'application.
J'en arrive à me demander si ma question a bien un sens !
Merci pour vos lumières

[Marco46]

Comment arriver à manipuler des données issues d'une Promise en dehors de la fonction success ?

Tu ne peux pas !

Le principe de la promise c'est que c'est une promesse, tu ne sais pas quand ça sera exécuté, donc tu ne sais pas si ça sera vraiment exécuté ou non. Donc il y a forcément une séparation success / error pour définir ce que tu vas exécuter si la promesse est réellement exécutée ou si il y a une erreur.

Résoudre des promesses dans les contrôleurs Angular est une pratique extrêmement courante.