Angular $templateCache vs HTML5 browser cache

Question

I am trying to wrap my head around the concept of caching. I haven't used it extensively and had a question about using Angular's $templateCache vs the browsers Cache:

1) Do the browser's cache and Angular's $templateCache compete with one another? IE do they store the same type of thing generally speaking?

Given how 'opinionated' Angular is, when developing Angular apps, I would assume that you are encouraged to use $templateCache over the browser's if they do store the same type of thing. And if they do indeed store the same type of thing, what are the pros and cons of using each?

2) How does dynamically generated HTML fit into this discussion of which cache (if they store different things) to use?

3) are there any cons to using caches generally speaking?

Malkus · Accepted Answer · 2015-12-23 18:22:31Z

5

The $templateCache is completely separate from the browser caching.

Browser Cache: Caches files such as myapp.js and fancy.css so your browser does not have to fetch the files from the server if it has a recently cached copy

$templateCache: is the way angularjs stores and tracks snippets of html that are used for different angular components/modules after they first time they are loaded (although you can choose to load the $templateCache directly). The $templateCache is rebuilt every time you reload the app, it is not persistent across the browser.

The reason angular does this is because you might reuse the same html file for multiple templates (or it may appear multiple times on your site, such as when using directives). This allows angular to know it already has that snippet and can load it from the cache.

Answers to a couple questions

How do these two caches interact with HTTP requests?

You can't cache $.ajax or $http requests, but this would only affect fetching static content such as javascript files, css files and images. The advantage of the browser cache is that it would improve user experience/performance. If they were just on your site yesterday they do not have to wait to pull down all the associated static content.

The angularjs $templateCache does not interact with http at all. While the resource may come from an http fetch, and your browser may cache that file. Angular is choosing to organize and track those snippets of html.

To better examplify this look at a this snippet:

angular.module('directivesModule').directive('mySharedScope', function () {
    return {
        template: 'Name: {{customer.name}}<br /> Street: {{customer.street}}'
    };
});

The template in the above module would still have its' html added to the angular $templateCache even though the html is inline in the directive definition.

What are the drawbacks of using caches in general (either for caching files or response from HTTP requests)

You do have to be careful when updated versions of your static content. You can get around this through a variety of types of cache busting.

example: You update your myapp.js, the was 1.1 now it is 1.2 The users browser would not now that and they would load the old version of the site.

To get around this you can change the name. This will force the users browser to fetch the most recent file.

ex. myapp_1.1.js to myapp_1.2.js

Again the angularjs $templateCache is not affected by this because it is not persistent.

edited Dec 23, 2015 at 18:22

answered Dec 23, 2015 at 18:07

Malkus

3,7262 gold badges27 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

devdropper87 Over a year ago

I see. How do these two caches interact with HTTP requests? What are the drawbacks of using caches in general (either for caching files or response from HTTP requests)

devdropper87 Over a year ago

Thank you for this detailed answer. I also found the $cacheFactory in AngularJS which answered some of my other questions: docs.angularjs.org/api/ng/service/$cacheFactory. I was getting mixed up between asset caching + HTTP request caching.

George · Accepted Answer · 2015-12-23 19:27:54Z

3

Good answer above for $templateCache. In addition, I believe if you DO decide you want templates to be cached then you might want to check out using ng-include.

Angular doesn't really encourage 1 method over the other. It just depends on what your need is.

There is also a gulp/grunt task angular-templates that you can use as a pre-build step to transform the template files into strings that get dropped in your JS files to hydrate the template cache

answered Dec 23, 2015 at 19:27

George

312 bronze badges

Collectives™ on Stack Overflow

Angular $templateCache vs HTML5 browser cache

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related