防止每次访问相同状态时加载数据

Question

我有一个具有两种状态的 angularjs 应用程序：-

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",
      });

}

场景 - 基本上默认状态一（列表）打开并获取数据，然后我们可以通过单击状态一中的按钮导航到状态二（详细信息）。

问题 - 当我从状态二回到状态一时，再次获取数据，这需要时间来加载屏幕。

这会使网站变慢。

帮助我了解如何防止这种情况..

Answer 1

一种方法是将数据存储在服务中，如here.所提到的@因此，每当您拨打电话时，您可以先检查服务是否已经存在数据，例如

//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);
});

另一种方法是存储在客户端数据库中，例如 localStorage / indexedDB / sessionStorage。