Improve this Doc View Source $templateCache

  1. service in module ng

Overview

$templateCache is a Cache object created by the $cacheFactory.

The first time a template is used, it is loaded in the template cache for quick retrieval. You can load templates directly into the cache in a script tag, by using $templateRequest, or by consuming the $templateCache service directly.

Adding via the script tag:

<script type="text/ng-template" id="templateId.html">
  <p>This is the content of the template</p>
</script>

Note: the script tag containing the template does not need to be included in the head of the document, but it must be a descendent of the $rootElement (e.g. element with ngApp attribute), otherwise the template will be ignored.

Adding via the $templateCache service:

var myApp = angular.module('myApp', []);
myApp.run(function($templateCache) {
  $templateCache.put('templateId.html', 'This is the content of the template');
});

To retrieve the template later, simply use it in your component:

myApp.component('myComponent', {
   templateUrl: 'templateId.html'
});

or get it via the $templateCache service:

$templateCache.get('templateId.html')

© 2010–2020 Google, Inc.
Licensed under the Creative Commons Attribution License 3.0.
https://code.angularjs.org/1.8.2/docs/api/ng/service/$templateCache