Angulaire: retour à la liste après avoir sélectionné un élément

Question

J'ai le problème suivant dans une application angulaire: - la première page est une page de recherche, avec un formulaire et une liste de recherche. Les résultats de la recherche sont paginée, il y a un bouton "afficher plus" qui affiche les 10 prochains résultats - en cliquant sur un résultat apporte à la deuxième page, avec des informations détaillées sur l'élément (juste un comportement de recherche classique).

Maintenant, mon problème est le suivant: à partir de la page d'élément, cliquer sur le bouton RETOUR du navigateur amène l'utilisateur à la page de recherche, mais la recherche est perdue.

J'ai mis en place un cache, afin que le formulaire soit stocké dans un service - de cette façon, je peux relancer la recherche automatiquement. Mais dans ce cas, le défilement est perdu et seuls les dix premiers résultats sont affichés (pagination est perdue).

Cette seule solution que je vois est d'ajouter une entrée dans l'historique chaque fois que le bouton "show more" est cliqué, mais je devrai également enregistrer quelque part le niveau de défilement de la fenêtre. Je trouve cette solution assez compliquée et agaçante, pas belle.

La question est donc: existe-t-il un moyen commun et plus facile de le faire?

Je pense que c'est un problème habituel de l'application ajax/angulaire, dans deezer quand je sélectionne un album j'ai le même).

Answer 1

Cela doit être géré via les paramètres url ... Le routeur d'application doit pouvoir demander un état d'application déterminé. Vous devez gérer les résultats de recherche côté client lorsque vous gérez les résultats de recherche côté serveur. Un exemple pourrait être: Que se passe-t-il si quelqu'un partage vos résultats de recherche par courrier?

C'est pourquoi tout ce qui concerne l'état d'application doit être maintenue sur l'url: http://myapp.com/search?page=1&...

Structurer votre application ainsi la btn history.back du navigateur fait exactement ce que vous recherchez.