web-dev-qa-db-fra.com

Conserver les données de la page lors de l'actualisation de la page

Je suis nouveau à angular. J'utilise un service qui obtient une liste d'objets et les affiche sur la 1ère page. Ensuite, en fonction de l'objet sur lequel vous avez cliqué, je configure l'en-tête de l'onglet sur la page suivante. Mais pendant l'actualisation de la page, l'étendue de la liste est perdue et l'en-tête de l'onglet renvoie l'exception, ce qui empêche la page d'afficher les informations. Existe-t-il un moyen de conserver les informations indiquant quel objet a été cliqué sur l'écran précédent, même lors de l'actualisation de la 2ème page?

angularjspage-refreshrootscope
14
Nutan

Vous pouvez utiliser le stockage local angulaire 

Stockage local angulaire

Exemple d'utilisation:

Exemple d'utilisation du stockage local

4
V31

Si vous êtes nouveau sur Angular et travaillez sur des projets non critiques, un appel supplémentaire au service à distance n’est pas la fin du monde.

Existe-t-il un moyen de conserver les informations sur l'objet sur lequel vous avez cliqué sur l'écran précédent, même lors de l'actualisation de la 2ème page? 

Utilisez-vous le routage dans votre application?

Voir exemple: http://plnkr.co/edit/Svg4Po13hMq7WxzNwKDc?p=preview

Contrôleurs

app.controller("main", function($scope) {
    $scope.items = [1,2,3,4];
}); 
app.controller("detail", function($scope, $routeParams) {
    $scope.myvalue = $routeParams.id;
});

Configuration du routage

var app = angular.module("app", ['ngRoute']);
app.config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'main',
        controller: 'main'
      })
      .when('/detail/:id', {
        templateUrl: 'detail',
        controller: 'detail'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

Lorsque vous actualisez la page de détails, il se souvient de son état. Ensuite, vous pouvez demander au service des données.

4
Michal Stefanow

Avez-vous plusieurs applications angularjs? En théorie, vous devriez avoir un seul fichier HTML et des partiels/contrôleurs, vous pouvez stocker les données que vous souhaitez utiliser dans un cache factory (singleton) ou angularJS. Si vous allez naviguer entre plusieurs pages HTML, vous pouvez utiliser le stockage local ou le rechargement. les données du serveur.

Quelques liens utiles:

$ cache

https://docs.angularjs.org/api/ng/service/ $ cacheFactory

Stockage local:

Comment stocker des données dans un stockage local en utilisant Angularjs?

2
Braulio

La meilleure pratique pour gérer ce type de scénario consiste à associer angular service + localstorage. 

  • Le service vous aidera à transférer des données entre deux pages /controllers. 
  • Et enregistrer ces données sur localstorage vous aidera à obtenir ces données lors de l'actualisation de la page.

Et si les données ne sont que l'id de l'URL, répondez par @Michal Stefanow, c'est bien également.

Lien d'aide

1
Muslim Munir