[AngularJS] Taking control of your templates using $templateCache

Using $templateCache for quickly retrieval from the cache after first time used.

 

$templateCache mainly can use two methods:

• get(id)
• put(id, "your html code here")

 

angular.module('app', [])
    .directive('myButton', function () {
        return {
            templateUrl: 'timestamp'
        }
    })
    .run(function ($templateCache) {
        $templateCache.put('timestamp', '<button>' + Date.now() + '</button>');
    });

 

or you can but your template in the <script> tag, then use templateCache.get() method:

<script type="text/ng-template" id="templateId.html">
  <button>Date.now()</button>
</script>

angular.module('app', [])
    .directive('myButton', function ($templateCache) {
        return {
            templateUrl: $templateCache.get('templateId.html')
        }
    })