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
Related
I have an angular application. From frontend I can set some value. This value is something like config, which can be changed.
It is simple string variable. How to attach this config to each REST request ?
I ask mainly about approach.
Maybe pass it via headers is good idea ?
For angular 1.x, write an Interceptor:
For purposes of global error handling, authentication, or any kind of
synchronous or asynchronous pre-processing of request or
postprocessing of responses, it is desirable to be able to intercept
requests before they are handed to the server and responses before
they are handed over to the application code that initiated these
requests
For angular 2.x / 4.x, RequestOptions should be the key to solve your problem. Set base url for angular 2 http requests
I'm using angular2, my solution is create a Service and inject "Http" dependency, then write two methods "get", "post", these methods add an entry to header before calling "Http", in other component / service, I just inject this Service class, then call its "get" or "post".
Your code should be somewhat like this If your working in angular 1.3 or less
The data should be sent as body data to server
var basecall = Restangular.all('url');
bascall.post($scope.config).then(function(data){
})
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.
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
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.
This must be a very stupid question because nobody else is asking it. I'm using Backbone.js with URLs for views like website.com/#article/12. To fetch the article, there is a GET request to /article/12. How do I redirect or 404 when the user goes to website.com/article/12 (without the hash) and sees the requested JSON in the browser?
Your server should just respond to different HTTP requests in different ways based on the Accept headers.
On your server, if the request comes in with Accept: application/json then your app should return the JSON. Otherwise (like if it's Accept: text/html) you can return the HTML view you want them to see, redirect, or whatever. How you do this would just depend on what language/framework you're using, but should be relatively easy.
Ideally you'd use the same URL for the client view and drop the # tag (check out HTML5 pushState which Backbone.js supports nicely.)