javascriptangularjstemplatescachingpartials

AngularJS: what is $templateCache?

While profiling a large AngularJS app, I started tracking $templateCache.

https://docs.angularjs.org/api/ng/service/$templateCache

What is this object? Does it store the partials as they are stored on disk or the final rendered HTML from the route?

I've added some code like this to my controller to make sure it's not persisting anything:

$scope.$on('$destroy', function cleanup() { $templateCache.removeAll(); });

EDIT: the reason I am looking into this is that a single (not every) controller is loading a large partial with several loops inside of it, depending on User input it could be about 100 input fields with large <select> statements and many custom directives. The client is requesting it be this way and I want to make sure that all of this is getting disposed during routing.

To clarify the question: $templateCache is only storing the partials as they appear on disk, no routing or rendering information is being stored?

Solution

  • By default, while loading templates, Angular looks inside $templateCache and fetches templates over XHR when it cannot find them locally in its $templateCache. When the XHR request is slow or our template is large enough, it can seriously negatively impact end users’ experience . instead of fetching templates XHR, we can fake the template cache loading by wrapping it into a JavaScript file and shipp the JavaScript file along with the rest of the application.

    Sample : 

    angular.module('myApp')
.run(['$templateCache', function($templateCache) {
$templateCache.put('xyz.html', ...);
}]);

    So, unless you are very much sure to remove the cached templates form $templateCache, don't do that.