防止每次访问相同状态时加载数据
Preventing loading data every time the same state is visited
我有一个 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",
});
}
场景 - 基本上默认状态一(列表)打开并获取数据,然后我们可以通过单击状态一中的按钮导航到状态二(详细信息)。
问题 - 当我从状态二返回到状态一时,再次获取数据,这需要时间来加载屏幕。
这会使网站变慢。
帮我看看如何防止这种情况..
一种方法是如上所述将数据存储在服务中因此,无论何时拨打电话,如果数据已经存在,您都可以先检查服务,例如
//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.
我有一个 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",
});
}
场景 - 基本上默认状态一(列表)打开并获取数据,然后我们可以通过单击状态一中的按钮导航到状态二(详细信息)。
问题 - 当我从状态二返回到状态一时,再次获取数据,这需要时间来加载屏幕。
这会使网站变慢。
帮我看看如何防止这种情况..
一种方法是如上所述将数据存储在服务中
//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.