Preventing loading data every time the same state is visited

Question

I have an angularjs app with two states :-

function routeConfig($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.when('/main','/main/list');

  $stateProvider
      .state('main', {
        url: '/main',
        //abstract: true,
        templateUrl: 'app/pages/main/main.html',
        title: 'Main',
        sidebarMeta: {
          icon: 'ion-android-home',
          order: 0,
        },
      }).state('main.list', {
        url: '/list',
        templateUrl: 'app/pages/main/list/List.html',
        title: 'Main',
        controller: 'ListCtrl',
        resolve: {
           Data: function(myService) {
             return myService.getData();
           }
        }
      }).state('main.detail', {
        url: '/detail/:symbol',
        templateUrl: 'app/pages/main/detail/Detail.html',
        title: 'Graph',
        controller: "DetailCtrl",
      });

}

Scenario - Basically by default state one (list) opens and fetches data, then we can navigate to state two (detail) by clicking on a button from state one.

Problem - When I go back from state two to state one, data is fetched again, which takes time to load the screen.

This makes the website slow.

Help me as to how to prevent this..

Answer 1

One way is to store the data in service as mentioned here.So whenever you are making a call you can first check in the service if the data is already there like

//Considering we have created service called commonService
app.controller("MyController", function ($scope, commonService) {

    $scope.info = commonService.getInfo();
    //Check if $scope.info is empty.
    //If empty or invalid data call API.
    //If API is called then update data in the service
    commonService.setInfo(data);
});

The other way will be to store in Client side database like localStorage / indexedDB / sessionStorage.