Persist data between navigation views

1

Is there a way to persist data between 2 views ?

For example, i’m using the default sidemenu template.

If I populate the Playlists from an API I query from the playlistscontroller.
When I navigate into an item of the playlist, I can get a detailed view.

When I click “back” button to take me back to the list, is it possible to persist the previous results from the playlists query ?

Thanks in advance

1 Like
2

The best way would be to set up a factory so you can have that data stored and then call it in your controllers. A simple example of this would be the starter tab project provided by ionic.

angular.module('starter.services', [])

/**
 * A simple example service that returns some data.
 */
.factory('Friends', function() {
  // Might use a resource here that returns a JSON array

  // Some fake testing data
  var friends = [
    { id: 0, name: 'Scruff McGruff' },
    { id: 1, name: 'G.I. Joe' },
    { id: 2, name: 'Miss Frizzle' },
    { id: 3, name: 'Ash Ketchum' }
  ];

  return {
    all: function() {
      return friends;
    },
    get: function(friendId) {
      // Simple index lookup
      return friends[friendId];
    }
  }
});

Of course, you would have to adapt this to fit your needs but it should get you started.

3

Sorry for my lack of understanding. I’m not sure I follow.
It seems the factory will enable me to create a service for connecting with my API to get the data, but this will happen on each load of a view (page).

In my scenario, I would like the playlists to load by getting either via factory, service or the controller itself and display the “list” of items it found.
Lets say the list is (as per the example):
playlists = [
{ title: ‘Reggae’, id: 1 },
{ title: ‘Chill’, id: 2 },
{ title: ‘Dubstep’, id: 3 },
{ title: ‘Indie’, id: 4 },
{ title: ‘Rap’, id: 5 },
{ title: ‘Cowbell’, id: 6 }
];

This gets loaded in $scope and can be used by ng-repeat to populate the list in the view.

Now if I drill down by clicking on say: “Indie”, this will show me a detailed view that I can populate with other data relative to the "indie"playlist at id=4.

Now, this is where I would like to persist data. What happens if I click back at the top ?

This will take be back to the playlists view, and load via the controller, service or factory, the items from the API.
I want to avoid this query call and be able to re-use the data I got the first time: ie. what I call persist it.

Any way for me to simply achieve this ?

4

I’m using cache factory to store data from a single api call, and use that data across states/routes.

In my services.js file is the following (and added to my index.html):

APP.factory('myCache', function ($cacheFactory) {
    return $cacheFactory('myCache', function ($cacheFactory) {
        return $cacheFactory('myCache');
    });
});

Inject myCache into controllers that need to store / access persisted data.

APP.controller('SearchResultsCtrl', function ($scope, $http, myCache) {
   // controller stuff here
}

And use like following:

myCache.put("last", searchInstance); // save data to cacheFactory

and

lastSearch = myCache.get('last'); // get data from cacheFactory

It’s a beautiful thing. See http://docs.angularjs.org/api/ng/service/$cacheFactory for details.

1 Like
5

Hi sir … how can I do this if the data is comming from a $http.get request … hope you can help me becasue i have the same problem

6

Take a look, it will work for you…

https://github.com/jmdobry/angular-data/blob/master/guide/angular-cache/http.md

7

@grege: You should be able to use built in caching on $http or $resource instead of doing it manually for simple caching needs