Discussion :

[Rhumario]

Bonjour, bonjour,

Etant toujours aussi fort avec Angular JS, je n'arrive pas à récupérer une info d'une page vers une autre. Je m'explique,
j'ai un tableau comportant une liste d'objet. Dans ce tableau j'affiche le minium d'information, par exemple le nom.

table.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
 
<div ng-controller="X">
<table id="tab-result" class="table table-bordered table-striped" ng-show="instruments.length > 0 ">
    <thead>
        <tr>
            <th><a ng-click="predicate = 'name'; reverse=!reverse">Valeurs</a></th>
	  </tr>
    </thead>
    <tbody>
        <tr ng-repeat="i in instruments | orderBy:predicate:reverse | startFrom: pagination.page * pagination.perPage | limitTo: pagination.perPage">
            <td><div ng-controller="SyntheseCtrl"><a href="#/synthese/init" ng-click="setInstrumentSelected(i)">{{i.name}}</a></div></td>
        </tr>
    </tbody>
</table>
</div>

J'aimerais, lorsque je clique sur le nom de l'un de mes objets, arriver sur page qui me donne une description détaillée de celui-ci. Mais je n'arrive pas à garder mon objet en mémoire.

J'ai créé un controller "X" qui permet de charger ma liste d'objet et de remplir mon tableau, et un autre pour "SyntheseCtrl" qui normalement devrait garder mon objet en mémoire mais sans succès.

J'utilise coté Serveur Spring MVC, si je clique sur un nom d'objet, je suis redirigé vers <a href="#/synthese/init" >
Voici la fonction de mon controller :

Code java :

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

1
2
3
4
5
6
7
8
9
 
@Controller
@RequestMapping("/synthese")
public class SyntheseController {
	@RequestMapping("/init")
	public String getSynthesePartialPage(final ModelMap modelMap) {
		return "synthese/fiche";
	}
}

Celui-ci me renvoie sur la page où je veux obtenir une description détaillée de mon objet. sauf que, bien sûr, je n'ai plus l'objet sélectionné...
Comment puis-je faire cela ?
Dois-je passer par Spring ? Si oui, avez-vous une piste, un exemple ?
Sinon peut-on le faire uniquement avec angular js ? C'est pour ça que j'ai créé le controller "SyntheseCtrl" qui enregistre mon objet sélectionné grâce à la méthode setInstrumentSelected(i). Mais sans succès.

En attente de votre aide, je vous souhaite un bon week end.

[Peps16]

Salut, moi aussi je débute sur AngularJS.

Je viens de créer un plunker pour essayer quelques trucs et en m'inspirant du tuto officiel (que tu peux trouver ici) .

Tu peux passer des paramètres d'une vue à une autre en utilisant le module ngRoute (qui n'est pas distribué dans le core du framework). L'idée c'est de faire du routing en fonction de ton url en passant la vue à afficher ainsi que le contrôleur à utiliser.

Je t'encourage à regarder le plunker que j'ai linké plus haut et aussi à regarder le tuto.

PS: je sais l'ajout de données dans le contrôleur c'est moche, c'est juste pour l'exemple du routing.

Bon weekend et courage

[vermine]

Salut,

A tout hasard, un membre vient de nous proposer un tutoriel AngularJS - Spring.

Peut-être qu'il s'y trouve des éléments de réponses.

[Paleo]

Je ne comprends pas pourquoi il y aurait un aller-retour au serveur. Les données complètes sont chargées si j'ai bien compris ?

Les contrôleurs dans Angular ne sont pas faits pour conserver les données, au contraire, ils sont ré-exécutés (et les données sont perdues) à chaque passage d'une vue à l'autre. Une solution est de stocker les données à partager (le modèle de l'application en fait) dans un service.

Ensuite, comme le suggère Peps16, on peut mettre l'ID dans l'URL, le récupérer dans la vue des détails, puis questionner le service des données pour récupérer ce dont on a besoin.

[Rhumario]

Merci pour vous conseils, j'essaye de mettre quelque chose de propre en place et je reviens vers vous.

[Marco46]

Ton problème est plus conceptuel que lié à un bug ou à un code.

Une application Angular c'est une application à part, complètement dissociée du serveur de données (généralement un serveur publiant des services REST).

Je ne sais pas ce que dit monsieur Tahé sur le sujet je vais aller voir mais il faut vraiment penser son application Angular comme du client lourd en mode client/serveur.

Là ton problème c'est que ton serveur SPRING cherche à servir une vue, ce qui n'est pas du tout son job (il ne doit servir que les données).

[Rhumario]

Mon service Spring me permet effectivement de me rediriger vers des pages et ensuite de charger les données.

Par exemple : voici un lien sur l'une de mes pages.

Code html :

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

<li><a href="#/actions/palmares/paris">Palmares</a><li>

Grâce à la configuration angular :

Code javascript :

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

1
2
3
4
5
App.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/actions/palmares/paris', {
        templateUrl: 'palmares/paris'
    }); 
};

Je suis redirigé vers une URL de mapping de mon controller Spring :

Code java :

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

1
2
3
4
5
6
7
8
9
@Controller
@RequestMapping("/palmares")
public class PalmaresController {
...
	@RequestMapping("/paris")
	public String getParisPartialPage(final ModelMap modelMap) {
		return "actions/palmares/paris";
	}
}

Maintenant j'arrive sur la page contenant mon tableau de données et qui utilise un contrôleur JS qui me permet de charger les données.

page.html

Code html :

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

1
2
3
<div ng-controller="PalmaresParisCtrl">
     <div ng-include src="'table'"></div> 
</div>

controller.js

Code javascript :

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
ctrl.controller('PalmaresParisCtrl', ['$scope', '$http','pagination', function($scope,$http,Pagination) {
 
	$scope.formulaire = {} ;
	$scope.instruments = {};
 
   $scope.initPage = function() { 		
    	$http.post('palmares/initParis',$scope.formulaire).success(function(data) {
        	$scope.instruments = data.instruments; 
        	$scope.variations = data.variations ;
        	$scope.marches = data.cours ;
        	$scope.periodes = data.periodes ;
        	$scope.pagination = Pagination.getNew(10,$scope.instruments.length);
        	$scope.pagination.page = 0;
        	$scope.fetchNumPage();
        });
   };
   $scope.fetchNumPage = function(){
   $scope.pagination.numPages = Math.ceil($scope.instruments.length/$scope.pagination.perPage);
   };
   $scope.initPage();
 
}]);

Ici mon contrôleur js fait un appel vers mon URL de mapping Spring qui me permet de charger les données.
J’espère être compréhensible, vous en pensez quoi ? Mon implémentation n'est pas correcte ? Mon contrôleur Spring ne devrait pas effectuer de redirection ?

[Marco46]

Ce que je veux dire c'est qu'il faut distinguer le serveur web qui va fournir les pages web (html, css et js), du serveur des webservices qui vont fournir les données.

Avec une appli Angular, l'utilisateur arrive sur le site, il charge l'application (html css et js sur la base de ton index.html), et ensuite selon ses actions l'application va télécharger les data (et faire des post des delete etc ...). Une application Angular c'est une application single page. Cela signifie qu'il n'y a ... qu'une seule page.

Donc à la limite si tu veux te servir de ton serveur Spring pour servir l'application, tu vas avoir une seule route qui sert l'application, qui sera appelée quand l'utilisateur se connecte ... et c'est tout. Le reste ça va être des services web qui serviront du json.

Ensuite pour charger tes vues c'est ton routeur Angular qui va gérer ça (Il faut bien sur que ton serveur web puisse servir le html correspondant aux vues).

Là pour ton histoire, ne connaissant pas Spring, je ne peux pas te dire si ton serveur est mal écrit, mais je voulais préciser au niveau de l'architecture parce que j'ai pas l'impression que tu ais bien compris le principe que je décris.

En résumé, les anciennes applications J2EE c'est tout généré côté serveur avec plein de templates, en Angular pas du tout, on a une distinction forte en client et serveur. On pourrait parfaitement avoir une application fonctionnelle qui n'attaque aucun service web.

Je sais pas si je suis clair.

[Rhumario]

oui c'est mon problème, j'ai très peu de connaissance en JS donc je ne connais pas du tout angular JS, je ne suis pas non plus un pro de Spring mais je dois les appliquer... donc la mise en place est très complexe. Et j'aimerai partir sur de bonne base avant de continuer le développement.

je dois surement mal m'exprimer mais pour la partie single page, j'ai bien compris. J'aurai dut dire plutot "une zone de ma page" que je rafraîchi en fonction des actions de l'utilisateurs.

Par contre je ne comprend pas comment je pourrais faire pour mettre une place 1 seul route qui sert l'application. toutes les pages de mon appli se ressemblent, il n'y que les données qui changent, qu'on j'utilise Spring pour récupérer les données que j'ai besoin via différents Web Services et bd, j'effectue de gros traitement dessus avant de les renvoyer vers la zone correspondante en json

Je pense que mon erreur est que j'utilise Spring pour la redirection de zone, je devrais l'utiliser uniquement pour charger les bonnes données.

[Peps16]

Je pense que mon erreur est que j'utilise Spring pour la redirection de zone, je devrais l'utiliser uniquement pour charger les bonnes données.

Il me semble que c'est ce que Marco veut dire. Ton serveur J2EE doit seulement s'occuper de transmettre les données à ton appli angular via le service $http (d'ailleurs je doute que l'utilisation de $http soit à faire dans un contrôleur mais plutôt dans une factory). Et c'est aussi ton appli angular qui doit s'occuper de manager le routing, pas ton serveur.

[Rhumario]

Oui j'essaye de mettre ça en place mais pour le moment sans succès.

Par exemple j'ai le lien suivant :

Code html :

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

<a ng-href="#/synthese">{{i.name}}</a>

Donc dans la configuration angular, j'ai ajouté ça:

Code javascript :

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

1
2
3
4
 
$routeProvider.when('/synthese', {
      templateUrl: 'synthese/synthese.html'
});

Donc normalement je devrais être redirigé vers une zone... mais à la place, Spring m'indique ce message :

WARN : org.springframework.web.servlet.PageNotFound - No mapping found for HTTP request with URI [/lesechos-web-prototype/synthese/synthese.html] in DispatcherServlet with name 'appServlet'

Donc je ne vois pas comment empêcher Spring de faire de la redirection...

[Marco46]

Tu devrais servir des services web et seulement des services web avec Spring.

Et lancer ton appli Angular avec un serveur web léger dans ce style. (Si tu as des questions sur CORS par l'occasion n'hésite pas ^^)

[Paleo]

WARN : org.springframework.web.servlet.PageNotFound - No mapping found for HTTP request with URI [/lesechos-web-prototype/synthese/synthese.html] in DispatcherServlet with name 'appServlet'

Le serveur ne trouve pas la ressource "synthese/synthese.html" qui doit contenir un template HTML chargé par Angular en Ajax. Il faut faire en sorte qu'il la trouve. Ce n'est pas une redirection.

[Rhumario]

C'est enfin ok!! Maintenant mon serveur Spring me permet uniquement de récupéré les info.
Je retourne enfin a mon 1 er problème qui est de récupere un objet une page à une autre.

[Marco46]

C'est enfin ok!! Maintenant mon serveur Spring me permet uniquement de récupéré les info.
Je retourne enfin a mon 1 er problème qui est de récupere un objet une page à une autre.

Il n'y a qu'une seule page dans une application Angular.

Tu voudrais pas plutôt faire passer des infos d'une vue à une autre ?

[Rhumario]

Oui, j'ai mis en place 1 seule page, et j'affiche ou non des widgets en fonction de l'action de l'utilisateur.

Pour résumé: je charge via Spring une liste d'objet, J'affiche cette liste dans une vue sous forme de tableau en affichant quelque champs (exemple: nom de l'objet)
J aimerais lorsque je clique sur le nom d'un objet afficher une vue avec la description détaillée de mon objet.

Etant donnée que j'ai déjà chargé ma liste d'objet, j'ai déjà toute les informations pour afficher la description détaillée. Mais je n'arrive pas a basculer mon objet d'une vue a une autre.

Pour le moment j'arrive a récupérer la clé primaire de mon objet via la l'url. Et avec cette clé, je peux récupéré mon objet complet en appelant mon serveur Spring. Mais je trouve ça dommage d'un point de vue performance, puisque dans la vue précédente, j'ai déjà toutes les info.

Du coup peut-on avec Angular JS envoyer un objet d'une vue a une autre ou dois-je obligatoirement interroger mon serveur?

En espérant que mon explication est claire.

[Marco46]

Du coup peut-on avec Angular JS envoyer un objet d'une vue a une autre ou dois-je obligatoirement interroger mon serveur?

Non.

Tu stockes tes objets dans un service du type value et tu l'injectes dans les contrôleurs où tu en as besoin.

EDIT : Une autre solution moins classe c'est de stocker le modèle dans le rootScope. Ca a l'avantage de résoudre les problèmes de mise à jour du scope si tu as un système de vues imbriquées compliqué.

[Rhumario]

le service de type value ne fonctionne pas ou je l'utilise mal... lol

alors voici les valeurs que j'ai déclaré.

Code :

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

1
2
3
AppServices.value('code', 'init code');
AppServices.value('codif', 'init codif');
AppServices.value('place', 'init place');

dans un premier controller, j'enregistre les valeurs :

Code :

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

1
2
3
4
5
	function($scope,$http,$routeParams,code,codif,place) {
 
		code = $routeParams.code;
		codif = $routeParams.codif;
		place = $routeParams.place;

puis dans un deuxième controller, j'affiche les 3 variables, celle-ci sont réinitialisées puisque j’obtiens "init code", "init codif",...

[Marco46]

Parce que tu utilises des primitives.

Utilises un seul service avec un objet :

Code :

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

1
2
3
4
5
6
 
AppServices.value('myValueService', {
	code:undefined,
	codif:undefined,
	place:undefined
});

Code :

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

1
2
3
4
5
6
 
function($scope,$http,$routeParams,myValueService) {
 
	myValueService.code = $routeParams.code;
	myValueService.codif = $routeParams.codif;
	myValueService.place = $routeParams.place;

[Rhumario]

Impeccable, ça fonctionne je te remercie