2013-02-12 1 views
15

Je suis nouveau à AngularJS et essaye de me construire une petite application simple. J'ai des données JSON pour que l'application soit récupérée avec $resource, et ces données doivent être identiques sur plusieurs vues/routes. Cependant, lorsque je passe à une nouvelle route, les données JSON (stockées sous $scope.data) ne sont plus disponibles dans la nouvelle vue. Que puis-je faire pour transmettre ces données à la nouvelle vue et ne pas avoir besoin d'un autre chargement? (L'application didacticiel de catalogue téléphonique récupère ces données à chaque fois de ce que je peux dire.)Comment préserver les données via le routage AngularJS?

D'après ce que je comprends, $rootScope peut le faire mais il semble être généralement désapprouvé. Je m'excuse si cela n'a pas beaucoup de sens; Je plonge beaucoup dans la partie profonde ici.

+0

duplication possible de [Angularjs, en passant la portée entre les routes] (http://stackoverflow.com/questions/13882077/angularjs-passing-scope-between-routes) –

Répondre

17

Utilisez un service pour stocker les données. Injectez ce service dans chaque contrôleur qui a besoin d'accéder à ces données. Chaque fois qu'un contrôleur est créé et exécuté (parce que vous passez à une autre vue/route), il peut demander des données au service. Si le service n'a pas encore les données, il peut faire une demande au serveur et retourner une promesse au contrôleur (voir ci-dessous pour savoir comment faire). Si le service a les données, il peut le renvoyer immédiatement au contrôleur.

Voir aussi Processing $http response in service

Notez que les services sont singletons, à la différence des contrôleurs. Autre variante: lorsque le service est créé, il peut aller chercher les données lui-même, puis les stocker pour une utilisation ultérieure. Les contrôleurs peuvent $ regarder les propriétés ou les fonctions du service. Pour un exemple de cette approche, voir How do I store a current user context in Angular?

+0

Merci pour le réponse! Malheureusement, je n'arrive toujours pas à le faire fonctionner (j'essaie la première méthode, qui me semble plus naturelle). J'ai '$ routeProvider' qui définit deux routes, pour l'instant chaque mapping vers le même contrôleur. Le contrôleur appelle 'service.async(). Then (...)' et la méthode 'async' du service renvoie la promesse définie par' http.get ('/ data.json') '. Et chaque fois que je navigue dans l'application vers une nouvelle route, une nouvelle requête HTTP à 'data.json' est faite. Toutes les pensées seraient grandement appréciées. – JacobEvelyn

+0

@ConstableJoe, essayez d'activer [$ http cache] (http://stackoverflow.com/questions/14117653/how-to-cache-an-http-get-service-in-angularjs). J'aurais dû le mentionner dans ma réponse. –

Questions connexes