Discussion :

[nightcyborg]

Bonjour,

Je viens tout juste de commencer à utiliser angular.js et je rencontre un soucis. En fait je passe une application MVC+Razor en MVC+Angular.js. Du coup j'ai modifié (pour test) un de mes controlleur MVC pour qu'il renvoi du json. jusque là aucun problème pour moi, un beau json est renvoyé comme il faut. mais quand j'essaye de l'appeler avec $http, impossible de récupérer ce json.

voici mon fichier app.js qui contient le peu de code que j'ai fait :

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
 
app = angular.module('appManager', []);
 
app.controller('activiteController', ['$http', function ($http) {
 
    //this.listeActivite = [{ 'CODE': '1', 'LIBELLE': 'test' }, { 'CODE': '2', 'LIBELLE': 'test 2' }];
 
 
    this.listeActivite = [];
    var promise = $http.get('/Rdv/GetActivites');
 
    promise.success(function (data) {
        this.listeActivite = data;
    });
 
    promise.error(function () { 
        alert('impossible de récupérer les données'); 
    });
 
}]
        );

la ligne en commentaire fonctionne bien, c'est pour cela que j'en déduit que c'est l'appel ^http qui déconne.

coté vue voici mon code :

Code :

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

1
2
3
4
5
<td ng-controller="activiteController as activites">
                    <select id="Activite" name="Activite">
                        <option ng-repeat="opt in activites.listeActivite">{{opt.LIBELLE}}</option>
                    </select>
                </td>

j'ai essayé pleins de méthodes trouvés un peu partout, mais j'ai toujours le même problème, rien ne se passe. ma liste reste vide. je précise que le curseur ne passe même pas dans promise.error.

si quelqu'un peu m'aiguiller, il recevra ma reconnaissance éternelle

[Marco46]

Examiner le réseau dans ton navigateur et dis nous ce qu'il se passe.

La requête fonctionne-t-elle ?
Le json est-il téléchargé ?

Bref il manque des infos de debug pour t'aider ?

D'ailleurs c'est quoi comme URL /Rdv/GetActivites ?
GetActivites c'est quoi ? Un webservice ?

Le nom de domaine n'étant pas indiqué ... On sait pas où tu vas chercher ça.

Pour moi ce que tu fais là c'est essayer de ramener par http un fichier nommé GetActivites qui est situé sur en local (sur ton site web) dans un dossier Rdv.

[nightcyborg]

Salut,

C'est une application .net MVC. donc les url sont sous la forme "domaine/Contrôleur/Action". Donc si je fait /Rdv/GetActivites, j'appel GetActivites dans mon contrôleur Rdv. GetActivites est une méthode qui retourne les données au format JSON et quand je pointe cette méthode directement depuis le navigateur, mon JSON est complet et correct. d'ailleurs si je copie ce dernier et le met en dur il fonctionne. j'ai essayé de récupérer mon JSON avec JQUERY comme ceci :

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
 
 
app.controller('activiteController', ['$http', function ($http) {
 
            this.listeActivite = [];
 $.ajax({
        'async': true,
        'global': false,
        'url': "/Rdv/GetActivites",
        'dataType': "text",
        'success': function (data) {
            this.listeActivite = data;
        }
    });
 
}]);

et là c'est assez étrange, car en debuguant pas à pas, je me rend compte qu'au chargement de la page, le curseur ne passe pas dans $.Ajax. mais la page ce recharge toute seul après être passé par Angular.js et passe bien cette fois dans le $Ajax et récupére les données. mais il semble qu'il soit trop tard et que le binding soir déjà fait.

Je part en congés dans quelques minutes, donc je ne pourrais pas surveiller le sujet. ne m'en veuillez pas si je ne répond pas donc. mais si entre temps je trouve la solution je viendrais la donner ici.

[Marco46]

Sur ton premier code essaye avec un point d'arrêt dans la promise de success et regarde ce que contient data.

Une autre piste, comment est servi ton site web angular ?

Si ce n'est pas le même qui sert les services rest tu vas avoir besoin de configurer CORS sur tes services web (des entêtes http à retourner au client) sinon le navigateur refusera d'interpréter la requête.

Un bon moyen de voir si c'est ce problème c'est de tester avec Gnome ou Firefox, l'un ou l'autre de ces navigateurs montre les requêtes OPTIONS lancées par le mécanisme CORS.

Je résumé :

Si tu as une archi du type un seul serveur web qui sert les services web ET le site web, tu n'es pas concerné par CORS.
Si tu as un serveur web qui sert tes services et un autre qui sert le site, alors il faut que le serveur web des services web retourne certains headers pour permettre au navigateur d'interpréter la réponse.

[nightcyborg]

Salut,

Je suis de retour avec la solution. Bon je suis Dev .Net, donc quand tu me parle de CORS, REST (bon ça encore) ou GNOME, moi je fait Oo. mais oui, c'est le même serveur qui fourni les données et le site web car il n'est pas question de web services ici, j'ai simplement un contrôleur qui retourne du JSON. Tout est dans la même application.

Mon soucis était simplement du à des "erreurs" de syntaxes. Je met "erreurs" entre parenthèses parce que j'avais suivit un des cours officiels qu'il ne faut pas suivre au final.

Voilà le code coté 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
 
app = angular.module('appManager', []);
 
app.controller('activiteController', function ($scope, $http) {
 
 
    $scope.listeActivite = [];
    $http({
        method: 'GET',
        url: '/Rdv/GetActivites'
    }).success(function (result) {
        $scope.listeActivite = result;
    });
});

On notera l'utilisation de $scope, la suppression des crochets pour entourer la fonction, la suppression de l'option '$http' qu'il n'est nul besoin de déclarer en dehors de la fonction et l'initialisation de ListeActivite au début.

Coté vue, il y a juste une petite modification :

Code html :

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

1
2
3
<td ng-controller="activiteController as activites">
     <select ng-model="listeActivite" ng-options="item.LIBELLE as item.LIBELLE for item in listeActivite"></select>
</td>

Dans ng-options, l'alias ne préfixe pas la variable contenant les éléments.

Voilà, merci de ton aide et peu-être que ça servira à d'autres.

[Marco46]

Bon je suis Dev .Net, donc quand tu me parle de CORS, REST (bon ça encore) ou GNOME, moi je fait Oo.

C'est triste.

C'est comme si tu me disais que tu fais "oO" si on te parle de mails ou de la RFC822 au lieu de hotmail.

Aucun rapport entre CORS (ou REST) et GNOME.

CORS est un mécanisme de sécurité implémenté sur tous les navigateur modernes (y compris sur IE au passage )
REST est une architecture agnostique sur la technologie (tu peux faire une appli REST avec ton .NET)
GNOME est un projet opensource de bureau graphique.

Ces jeunes ...

[nightcyborg]

A dire vrai GNOME je connaissais, mais c'est loin. Après, on peu pas tout connaitre et l'avantage c'est que de nos jours, on a pas besoin de tout connaitre (et heureusement).

[devyreham]

Quand on retoune une promise, il ne suffit pas de la mettre dans une variable. Il faut recuperer une nouvelle fois le success/error.

le $http est deja une promise c est pour cela que ceci marche

Code :

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

1
2
3
4
5
6
    $http({
        method: 'GET',
        url: '/Rdv/GetActivites'
    }).success(function (result) {
        $scope.listeActivite = result;
    });

dans l'exemple du tutorial ils avaient mis

Code :

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

var promise = $http.get('/Rdv/GetActivites');

ce qui masque le retour de $http.



(la notation avec les brackets est correcte. Ca peut etre util si ton code est minifié car le parametre $http serait renommé

Code :

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

['$http', function ($http) {

devient

Code :

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

['$http', function (z) {

)