JSFiddle - React, Tailwind, and code Playground

HTML

<html>
        <body>
            <test-directive>This is a test</test-directive>
        </body>
    </html>

JavaScript

var app = angular.module('app', []);

    app.run(function() {
        console.log('Run');
    });
    
    app.directive('testDirective', function() {
        return {
            restrict: 'E',
            template: '<div class="test-directive"><h1><div ng-transclude></div></h1></div>',
            replace: true,
            transclude: true,
            compile: function() {
                console.log("Compiling test-directive");
                return {
                    pre: function() { console.log("Prelink"); },
                    post: function() { console.log("Postlink"); }
                };
            }
        };
    });
    
    // The bootstrapping process
    
    var body = document.getElementsByTagName('body')[0];
    
    // Check that our directive hasn't been compiled
    
    function howmany(classname) {
        return document.getElementsByClassName(classname).length;
    }
    
    console.log('before (should be 0):', howmany('test-directive'));
    
    angular.element(document).ready(function() {
        // Bootstrap the body, which loades the specified modules
        // and compiled the DOM.
        angular.bootstrap(body, ['app']);
        
        // Our app is loaded and the DOM is compiled
        console.log('after (should be 1):', howmany('test-directive'));
    });