Chapter 4: Managing application templates

by billy roberts

HTML

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

JavaScript

// use the $templateCache.put( ... directly

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() {
    return {
        templateUrl: 'player-box.html',
        link: function(scope) {
            scope.player = {
                name: 'Jimmy Butler',
                number: 21
            };
        }
    };
});