Chapter 4: Managing application templates

HTML

<script src="https://code.angularjs.org/1.3.2/angular.min.js"></script>
<div ng-app="myApp">
    <player-box></player-box>
</div>

JavaScript

angular.module('myApp', [])
.run(function($templateCache) {
    $templateCache.put(
        // the template key
        'player-box.html',
        // the template markup
        '<div>' +
        '    #{{ player.number }} {{ player.name }}' +
        '</div>'
    );



})
.directive('playerBox', function($templateCache) {
    return {
        templateUrl: 'player-box.html',
        link: function(scope) {
        
        	alert($templateCache.get('player-box.html'));
        	
          var str = '';
          for (var i in $templateCache) {
          		str += i+' = '+$templateCache[i]+'\r\n';
          }
        
          alert(str);
        
            scope.player = {
                name: 'Jimmy Butler',
                number: 21
            };
        }
    };
});