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.
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
For this method call:
$http.get("Some api call").then(function (response) {
$scope.data=response.data;
});
Suppose the response keeps on updating from time to time and I wish to update the $scope.data property whenever the response is updating without firing the $http.get using timeout or interval methods.
I am not getting any solution for this issue. Please provide your ideas with examples.
What you are asking is called Polling.
Your HTTP request will NOT get the latest data unless you fire the request again. Unless you fire the request again, your response will not have the latest data and thus, your data object will also not get updated.
No amount of $watch will suffice. Simply because, unless you poll the server periodically, you will not get the latest data.
This is how HTTP/1.1 behaves. This is soon about to change with HTTP/2
If you do not wish to make periodic requests, then have a look at sockets. You have not mentioned your backend but a Nodejs example can be found at socket.io.
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 am currently building a dashboard page with multiple widgets. Those widgets retrieve their data with REST calls ($resource). A few widgets make similar calls and I don't want to DDOS our server so I am looking for a way to make a call only once and resolve all similar requests with the same response.
Since I am restricted to using POST requests only, I cannot use the cache option that $resource offers. This seems to be doing exactly what I want but only for GET requests.
I was thinking along the lines of using a http interceptor to queue similar POST requests, fire only one of them and resolving them all when the first one gets its response.
However, I cannot seem to put the pieces together so any help is appreciated. I am open to other options.
Kind regards,
Tim
Services in AngularJS are singletons, so a solution would be to store the response in the service, as a variable. Then next time you'll do the request, previously check if the variable is null, if it's not you wrap it in a promise and returned it. If it's null, then you do the request, and store the response for the next call.
You can also either use this in your request service or in your interceptor service.
I hope I helped !
Refactor your widgets to depend on a service (singleton).
This service should either poll the server via XHR, or get server push via websocket for updates.
If polling, look into server side caching and etags.
Is the response from an Angular $http request cached before or after any transformResponse functions have been applied?
Use case:
My client's REST API returns a lot of metadata (most of which I don't need) so I don't want to cache the entire response. I'd like to apply a specific transformResponse for each different API end-point that copies only the fields I need into a new object\array and dispose of the original. I would then like the new object to automatically be cached. This should be nice and easy if the return data from transformResponse is cached.
Apparently is cached before transforming, as you can see in $http#717 sendReq is called before transformResponse, and in $http#958 you can see sendReq does the caching
Maybe you can be sure by doing a test