如何在ionic/angularjs中预取url？

Question

我是 ionic 1 的新手，我正在开发一个具有多个 URL 的应用程序(使用 Ionic 1 和 angular js)，其中每个 URL 都会显示一个类别列表，然后是每个类别的项目列表，每个项目都有一个文档 URL。如何在后台启动时预加载所有这些 URL，但不显示它们？有什么办法可以做到这一点吗？一个好的代码示例或教程将有很大帮助。 另外，请让我知道这是否是最好的方法，例如在启动时预加载和预缓存所有内容，或者应该逐个类别或其他方式完成。

提前感谢！

Answer 1

您可以使用$q.在后台进行多个异步服务调用 在数组中列出 URL，并使用$q.all(listOfURL).立即调用它们 使用承诺检索每个响应。

通过进行异步，您可以节省大量时间。

获得响应后，您可以将它们存储在$rootScope或localStorage/sessionStorage.

Answer 2

更新- 由于 OP 已经知道并使用 localStorage，因此其他建议：-

在这种情况下，您可以调用所有服务方法来在启动时获取数据，也可以使用无头浏览器(如">PhantomJS")在启动时访问这些 URL 并获取数据。

因此，您的代码将如下所示：-

var webPage = require('webpage');
var page = webPage.create();
page.open('http://www.google.com/', function(status) {
console.log('Status: ' + status);
// Do other things here...
});

有关PhantomJS的更多信息，请参阅以下链接：-

http://phantomjs.org/http://phantomjs.org/api/webpage/method/open.html

早期建议

在您的服务中发出 HTTP 请求以获取数据并将其存储到 localStorage，如下所示：-

$http.get('url', function(response) {
var obj = response.data;
window.localStorage.setItem('key', JSON.stringify(obj)); // Store data to localStorage for later use
});

用于获取数据：-

var cachedData = JSON.parse(window.localStorage.getItem('key')); // Load cached data stored earlier

有关">本地存储"的详细信息，请参阅以下链接：- https://www.w3schools.com/html/html5_webstorage.asp

希望这有帮助！

Answer 3

在 angular 中的不同视图之间共享数据的最佳方法是使用服务，因为它是单例并且可以在其他控制器中使用。 在主控制器中，您可以通过服务异步预取类别列表，该服务可以共享以供下一个视图使用。下面是您参考的一个小演示

angular.module("test").service("testservice",function('$http',$q){
var lists = undefined;
// fetch all lists in deferred technique
this.getLists = function() {
// if lists object is not defined then start the new process for fetch it
if (!lists) {
// create deferred object using $q
var deferred = $q.defer();
// get lists form backend
$http.get(URL)
.then(function(result) {
// save fetched posts to the local variable
lists = result.data;
// resolve the deferred
deferred.resolve(lists);
}, function(error) {
//handle error
deferred.reject(error);
});
// set the posts object to be a promise until result comeback
lists = deferred.promise;
}
// in any way wrap the lists object with $q.when which means:
// local posts object could be:
// a promise
// a real lists data
// both cases will be handled as promise because $q.when on real data will resolve it immediately
return $q.when(lists);
};
this.getLists2=function(){
//do it similarly as above
};
}).controller("mainController",function(testservice,$scope){
$scope.lists1=testervice.getLists()
.then(function(lists) {
//do something 
});
};
$scope.lists2=testervice.getLists2()
.then(function(lists) {
//do something 
});
};
$scope.lists1();
$scope.lists2();
}).controller("demoController1",function(testservice,$scope){
$scope.lists1=testervice.getLists()
.then(function(lists) {
//do something 
});
};
$scope.lists2=testervice.getLists2()
.then(function(lists) {
//do something 
});
};
$scope.lists1();
$scope.lists2();
});

Answer 4

我假设您不想在下一个屏幕中加载数据，提供完美的用户体验。

是的，您可以在第一页上开始加载URL，因为您希望它们获取要在将来屏幕中使用的数据。

在存储方面

1. 在 AngularJs 中，如果您希望某些内容在整个应用程序范围内持久存在，您应该使用 $rootscope[注意保留大量数据 可能会导致内存问题，您需要定期清除它]。
2. 或者另一种选择是将其存储在本地存储中。并根据您的需要获取。
3. 如果需要，可以在屏幕的不同控制器之间共享这些数组。

加载[从服务器获取响应]时，您可以做两件事 1. get single JSON response having all the data 2.have multiple urls, and load them serially.

根据您提前加载第 5 页(页面)屏幕数据的要求，这不是好的做法，甚至阻止用户看到更新，但这是您的要求。我们有几种方法：

1. 添加所有类别及其各自的详细信息，根据您的 pastebin 如心脏，然后是详细信息.. 肾脏然后详细信息.. 您可以通过管理层次结构[类别]来做到这一点，例如父主组及其JSONArray中的子子组以及JSONObject中的详细信息。(此更改将在发送方服务器上进行)

您只需加载一个 url 即可获取所有数据。 因此，您不需要像现在这样加载不同的URL。但要注意，这将是一个大Json。因此，当您存储它时，将类别和所需数据分开[屏幕要求]并存储在本地存储中，以便于访问。

2. 另一种方法是您必须提供要加载的 [category] 子组名称，这样加载就像使用不同的类别名称触发相同的 URL 来获取数据并将其存储在本地存储中。

这可能会导致大约 10-15 个[取决于您的类别] URL 可能会影响 UI 线程响应。 这不需要对服务器端响应进行任何更改。

**

以编程方式按顺序加载 URL 的方法：

**

URL加载：此方法将获取特定类别[id或任何内容]的详细信息 为你工作]。这将触发 http 请求并返回结果。

getCategoryDetails(category){
url = url+category;
return $http({ 
method: 'GET', 
url: url, 
headers: --
}).then(function onSuccess(response) {  //<--- `.then` transforms the promise here

您可以将以太存储在本地存储中 返回响应 }， 函数错误(响应) { 抛出 customExceptionHadnler.getErrorMsg(response.status， response.data); }); }

并行

：此方法将并行完成，我们只需加载类别[ids]，因为我们拥有所有这些类别，然后使用$q.all等待所有URL加载完成。

function loadUrlsParallel(urls) {
var loadUrls = []
for(var i = 0; i < urls.length; i++) {
loadUrls.push(getCategoryDetails(urls[i]))
}
return $q.all(loadUrls) 
}

第一个

API：此方法加载第一个 url，然后加载 url 上述并行调用方法

getListOfCategories(){
url = url;
return $http({ 
method: 'GET', 
url: url, 
headers: --
}).then(function onSuccess(response) {  //<--- `.then` transforms the promise here

你可以以太存储在本地存储中或直接发送响应 返回响应 }， 函数错误(响应) { 抛出 customExceptionHadnler.getErrorMsg(response.status， response.data); }); }

网址

：您必须准备附加类别的网址列表 加载第一个 URL 后加载[期望这会返回所有 您将事先在应用程序中需要的类别]并传递给 加载网址并行方法。

您可以根据自己的方便编写 loadUrl 方法，在这里无论什么 给出的是敌人示例目的，因此可能不会按原样运行。

您可以在 API 调用后从存储的本地存储的每个位置加载 API 响应，因此这不会要求您在每次页面上执行 API 调用[screen]

希望这对您有所帮助并解决您的问题。