Question

我对离子1很新，我正在开发一个带有多个URL的应用程序（带有Ionic 1和angular js），每个URL都会显示一个类别列表，然后是每个类别和每个项目的项目列表有一个文档URL。如何在后台启动时预加载所有这些URL但不显示它们？有什么办法可以实现吗？一个好的代码示例或教程将有很大帮助。另外，请告诉我这是否是最好的方法，如在启动时预加载和预缓存所有内容，或者应该按类别或其他方式完成。

提前致谢！

Answer 1

您可以使用$q.在后台进行多个异步服务调用列出数组中的网址列表，然后使用$q.all(listOfURL).一次调用它们使用promises检索每个响应。

通过使这种异步，您可以节省大量时间。

收到回复后，您可以将其存储在$rootScope或localStorage/sessionStorage.

中

Answer 2

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

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

就存储

而言

在AngularJs中，如果你想在整个应用程序范围内保留一些内容，你应该使用$ rootscope [注意保留大量数据   可能导致内存问题，你需要定期清除它。]

或另一种选择是将其存储在Localstorage中。并根据您的需要获取。

如果您愿意，可以在不同的屏幕控制器之间共享这些数组。

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

根据您提前加载第5（页面）屏幕数据的要求，这不是一个好习惯，甚至会阻止用户查看更新，但这是您的要求。我们有几种方法：

根据您的粘贴盒添加所有类别及其各自的详细信息，如心脏，然后它的详细信息..肾脏然后详细信息.. 您可以通过管理层次结构[类别]来完成此操作，例如父主组和JSONArray中的子子组以及JSONObject中的详细信息。（此更改将在发件人方 - 服务器上）

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

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

这可能导致10-15左右的火灾[取决于您的类别]网址可能会影响UI线程响应。这不需要对服务器端响应进行任何更改。

**

以编程方式顺序加载网址：

**

网址加载：此方法将获取特定类别[ID或任何内容的详细信息适合你]。这将触发http请求并返回结果。

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

//您可以在本地存储中存储以太网回复 }，function onError（response）{ throw customExceptionHadnler.getErrorMsg（response.status，response.data）; }）; }

并行：此方法将并行执行，我们只需加载类别[ids]，然后使用$ q.all等待所有网址加载完成。

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

第一个API：此方法加载第一个网址，然后加载网址并行调用上面的方法

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

//您可以在本地存储中存储以太存储或直接发送响应回复 }，function onError（response）{ throw customExceptionHadnler.getErrorMsg（response.status，response.data）; }）; }

网址：您必须准备包含附加类别的网址列表   加载第一个url后加载[期望这会让你全部返回   您之前需要在应用中使用的类别并传递给   loadUrlsParallel方法。

您可以根据自己的方便编写loadUrl方法，无论如何   给出的是敌人的例子目的，所以可能不会按原样运行。

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

希望这可以帮助你解决你的问题。

Answer 3

更新 - 由于OP已经知道并使用localStorage，因此提供了额外的建议： -

在这种情况下，您可以调用所有服务方法在启动时获取数据，也可以使用无头浏览器，例如 PhantomJS ＆＃39;在启动时访问这些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

有关＆＃39; localStorage ＆＃39;的详细信息，请参阅以下链接。： - https://www.w3schools.com/html/html5_webstorage.asp

希望这有帮助！

Answer 4

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

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

如何在ionic / angularjs中预取url？

4 个答案: