As is to be expected with a single-page application, you will be managing a large number of templates in your application. AngularJS has several template management solutions baked into it, which offer a range of ways for your application to handle template delivery.
Suppose you are using the following template in your application:
<div class="btn-group"> #{{ player.number }} {{ player.name }} </div>
The content of the template is unimportant; it is merely to demonstrate that this template has HTML and uncompiled AngularJS content inside it.
Additionally, assume you have the following directive that is trying to use the preceding template:
(app.js) angular.module('myApp', []) .directive('playerBox', function() { return { link: function(scope) { scope.player = { name: 'Jimmy Butler', number: 21 }; } }; });
The top-level template will look as follows:
(index.html) <div ng-app="myApp"> <player...