Improve this Doc View Source

## 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')