How $templateCache works?

Question

I'm a little confuse with the $templateCache resources;

• the html/template will be stored on the server-side ?

• Or will be stored on browser memory ? If so what's the memory limits?

Answer 1

How $templateCache Works

When you have templateUrl, before making a network request for that template, Angular will look in $templateCache first to see if it's there.

The first time you request some templateUrl a network request is made, but the result is stored in $templateCache so the next time you go to that url, it's retrieved from $templateCache.

In development, the fact that the first request isn't cached is fine because requests are for local files, not network requests for external files (which have high latency and are time consuming).

In production, there are two ways to set it up such that files are initially placed in $templateCache.

1. Using ngTemplate.
2. Adding to $templateCache manually in the run block. Tutorial.

Memory questions

$templateCache definitely does not access the template from the server; it stores it on the client. As for where on the client, I set up a SSCCE and it appears to store it as a JavaScript string. It doesn't appear to store it in localStorage, sessionStorage, or as a cookie.

Answer 2

The template will cache on the client after first use or when added via the put. There are no memory limits per se, but an excessively large or large number of cache templates will impact performance as they need to be downloaded by the client as part of the $documentRoot (i.e. ng-app).