Working on this app:
https://billiving-qa.azurewebsites.net/spa1/#/invoices
Some http calls should be cached, but for some reason this isn't working:
function getStatuses() {
return $http.get('/v1/definitions/status', { cache: true })
.then(function (response) {
return response.data;
})
}
If you look in Network you'd see 'v1/definitions/status' not cached although flag is set.
Thanks
Actually, it is caching from what I can see.
Angular's internal cache only stashes things in memory inside the application itself, it is not the same thing as a browser-cache. Angular's cache comes into play when the application tries to request the same url multiple times, like when going back and fourth between routes. It then grabs the response from the cache instead of doing another http-request.
What it doesn't do is cache things in the browser. If you fully reload the page you also reload the application and anything it has in memory, such as Angular's internal cache. So in this case a new request is made.
If you want to have a browser level cache so that it is cached even when the page is reloaded you need to handle that with caching headers from the server, Angular has no control over that.
As an example, to cache the request for 1 hour
cache-control: public, max-age=3600
Related
I have a few components in one page.
Each of them fetches the same data from the server.
As a result, when the page loads, these components send the same request multiple times.
Is there any way to prevent this? Like caching the promise of the first request and returning that to the next coming requests (before the promise resolved)?
In order to make sure that the request is sent only once, you can keep track of the first HttpPromise you create, and on subsequent calls of the function, return that same promise.
This SO link might be what you're looking for.
When calling the $http service you can additionally supply a cache object. If you do so any additional requests will use the cached value. If the same cache is used then additional requests made before the first is resolved will not call the server but wait for the response.
$http.get(url, {cache:cacheObj})
Where cacheObj is from $cacheFactory
Would it be possible to make all the API calls once when the user lands on the page from the url and store all the data as cache and then use the cache to render the state changes from Angular router?
I can see it being implemented by a service that populates the rootscope but would this method be recommended instead of calling the API multiple times?
You can use use $http and set cache to true.
Should be enough for your needs.
From documentation:
The default cache value can be set by updating the $http.defaults.cache property or the $httpProvider.defaults.cache
property.
When caching is enabled, $http stores the response from the server
using the relevant cache object. The next time the same request is
made, the response is returned from the cache without sending a
request to the server.
Take note that:
Only GET and JSONP requests are cached. The cache key is the request
URL including search parameters; headers are not considered. Cached
responses are returned asynchronously, in the same way as responses
from the server. If multiple identical requests are made using the
same cache, which is not yet populated, one request will be made to
the server and remaining requests will return the same response. A
cache-control header on the response does not affect if or how
responses are cached.
I have a weird problem with AngularJS's $http service which, as far as I can see, no one else has.
Every time I use $http.post() to sent cross domain requests, I can see in the developer tools (network pane) that two different requests are being sent: one, without any data, and immediately after that another one is sent which has all the data and returns with the correct response from the server.
Here's an example:
$http.post(url+'getSiteList.php', {session_id: $scope.session_id(), withCredentials: true})
.success(function(data, status, headers, config) {
console.log(data);
....
Does anyone know what's causing this? I checked the code, and the $http.post method is only being called once.
It's all about how browsers manage CORS. When making a cross-domain request in angular, the browser will automatically make a HTTP OPTIONS request to the specified URL/URI it is called as "pre-flight" request or "promise".
As long as the remote source returns a HTTP status code of 200 and relevant details about what it will accept in the response headers, then the browser will go ahead with the original JavaScript call.
I read the following for routing in AngularJs -
'SPA will compose the view, fill in the template, and display the view in the appropriate location within the shell. If the view has already been viewed once, the browser may have cached it and the router will be smart enough not to make the request.'
Is this a default behaviour of $routeprovider?
How does this relate to $templatecacheProvider.
What would be a way to suppress this behaviour ie forcing $routeprovider to not refer to browser cache?
I believe this has more to do with the $http service, since you're more concerned with template caching:
https://docs.angularjs.org/api/ng/service/$http
Caching
To enable caching, set the request configuration cache
property to true (to use default cache) or to a custom cache object
(built with $cacheFactory). When the cache is enabled, $http stores
the response from the server in the specified cache. The next time the
same request is made, the response is served from the cache without
sending a request to the server.
Note that even if the response is served from cache, delivery of the
data is asynchronous in the same way that real requests are.
If there are multiple GET requests for the same URL that should be
cached using the same cache, but the cache is not populated yet, only
one request to the server will be made and the remaining requests will
be fulfilled using the response from the first request.
You can change the default cache to a new object (built with
$cacheFactory) by updating the $http.defaults.cache property. All
requests who set their cache property to true will now use this cache
object.
If you set the default cache to false then only requests that specify
their own custom cache object will be cached.
Basically, when your application is bootstrapped/loaded, you want to set the $httpProvider.defaults.cache = false
This will then not cache any of the templates themselves and request the template on every route change.
I'm fetching a remote resource and caching the result:
$http({
method:'GET',
cache:true,
url:'...'
});
This works fine. However, when the user changes the languge in the UI, I also change the Accept-Language header on all AJAX calls.
The problem is caching is done based on URL so if a call is made using en-US as Accept-Language that gets cached and any other calls, regardless of language, are served from cache.
I don't want to add the language to the URL.
What are my options?
$cacheFactory can be used to invalidate cache when the user changes language. You could try to decorate it, or use wrap it in a service perhaps