angularjsbrowser-cacheangular-cache

How $templateCache works?


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


Solution

  • 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.