How do I prefetch url's in ionic/angularjs?

Question

I am pretty new to ionic 1 and I am working on an application (with Ionic 1 and angular js) with multiple URLs where each URL brings up a list of categories, followed by a list

Answer 1

I am assuming you don't want to load data in next screens, deliver user flawless experience.

Yes you can start loading URLs on you very first page as you want them to get the data you want to use in future screens.

In terms of storage

1. In AngularJs if you want something to persist throughout the application scope you should use $rootscope[beware keeping lot of data may leads to memory issues, you need to clear it regularly].
2. Or another option is to store it in Localstorage. And fetch as per your need.
3. If you want you can share those arrays between different controllers of screens.

While loading[response getting from server] you can do two things 1. get single JSON response having all the data 2.have multiple urls, and load them serially.

As per your requirement of loading 5th (page)screen data in advance it's not good practice, and even stop user from seeing updates but as it's your requirement. We've couple of approaches:

1. Add all the category and their respective details as per your pastebin like cardiac then it's details.. kidney then details.. You can do this with managing hierarchies [categories] like parent main group and it's child sub group in JSONArray and details in JSONObject. (This change would be on sender side -server)

You need to load only one url to get all data. So you don't need to load with different urls like now your doing. But beware this would be a big Json. So when you store it separate the categories and required data [screen-wise requirements] and store in local storage so easy for access.

2. Another approach would be you have to provide your [category] subgroup names to load so the loading would be like firing same URL with different category names to get data and store it in local storage.

This may lead to fire around 10-15[depends on your categories] urls may affect the UI thread response. This won't need any changes on your server side response.

**

Programmatically approach to load urls sequentially:

**

URL Loading: This method will get detail of particular category [id or anything works for you]. This will fire a http request and return a result.

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

//You can ether store in local storage return response }, function onError(response) { throw customExceptionHadnler.getErrorMsg(response.status, response.data); }); }

Parallel : This method will do it in parallel, we just load categories[ids] as we have all of them and then use $q.all to wait for all the urls loading to finish.

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

First API: This method to load first url and then Loading urls in parallel call above method

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

//You can ether store in local storage or directly send response return response }, function onError(response) { throw customExceptionHadnler.getErrorMsg(response.status, response.data); }); }

urls : you have to prepare list of urls with appending category to load after loading first url[expecting this returns you all the categories you will require in your app beforehand] and pass to loadUrlsParallel method.

You can write loadUrl methods as per your convenience, here whatever is given is foe example purpose so may not run as it is.

You can load API responses every where from local storage where you've stored after API calls, So this will not ask you to execute API calls on every laoding of pages[screen]

Hope this helps you and solves your prob.