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

}

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

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

这使网站变慢。

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

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 。

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

1 个答案: