Question

I am working on an AngularJS app with several directives. The directive’s templates are stored in a separate html file. When editing these template, my browser does not detect any changes after a reload and always uses a cached version. Any other changes to the source code are detected and lead to a reload.

I guess the problem is somewhat the $templateCache which seems to be used by AngularJS when loading the template.

What I found in the source code of AngularJS 1.0.2 is the following from line 4317 which is part of the compileTemplateUrl():

$http.get(origAsyncDirective.templateUrl, {cache: $templateCache})

I am wondering if anyone else had this kind of problem and if there is a way to tell AngularJS when to cache and when not.

Answer 1

The template cache is stored in your browser, as this is a javascript app. You can actually feed the $cache manually or stop your browser from caching the templates (as it would seem that for production, cache won’t be a problem), using developer tools.

For force feeding the cache:

function Main($cache) {
    $cache.data['first.html'] = {value: 'First template'};
    $cache.data['second.html'] = {value: '<b>Second</b> template'};

}

Main.$inject = ['$xhr.cache'];​

See it working in this fiddle.

To stop your browser from caching the templates (cited from this Google Groups post, about this problem, exactly):

My team and I have ran into this same issue. Our solution for
development while using Chrome was to open Developer Tools, and select
the gear in the bottom right hand corner. Then select Network –
Disable cache.

This fixed all our partial/template caching issues.