I'm working on building an AngularJS app to display the weather using Location Services. There is a slight lag in the API request from the time I'm able to receive a user's coordinates and the Weather API returns data to populate my views. When I change Angular views (for viewing different days of the week), it's as if it reloads the loading screen I have and retrieves new data but it's the same API call happening.
How can I cache the initial API request which contains all information I'll need per location so that it doesn't have to switch data but the end result of my promise chains would not notice there is caching going on.
return getLatLong().then(function (position) {
return $http({
method: 'GET',
url: "<My API request and API key>"
});
})
.then(function (response) {
return response.data.data;
})
.then(function (response) {
<Everything that happens down the Promise chain>
}
I have tried to create an Array and check the length before making the initial request but have had zero success. I appreciate any help someone may be able to offer.