JSFiddle - React, Tailwind, and code Playground

by Bretto

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js"></script>

JavaScript

// Make module Foo and store providers for later use
var providers = {};
angular.module('Foo', [], function($controllerProvider, $compileProvider, $provide) {
    providers = {
        $controllerProvider: $controllerProvider,
        $compileProvider: $compileProvider,
        $provide: $provide
    };
});
// Bootstrap Foo
angular.bootstrap($('body'), ['Foo']);

// .. time passes ..

// Store our _invokeQueue length before loading our controllers/directives/services
// This is just so we don't re-register anything
var queueLen = angular.module('Foo')._invokeQueue.length;

// Load javascript file with controllers/directives/services
angular.module('Foo')
.controller('Ctrl', function($scope, $rootScope, fooService) {
    $scope.msg = "It works! rootScope is " + $rootScope.$id +
        ", should be " + $('body').scope().$id;
    $scope.serviceMsg = fooService.msg;
})
.factory('fooService', function() {
    return { msg: "Some text from a service" };
})
.directive('testDirective', function() {
    return function(scope, elem) {
        $(elem).text('Directives also work');
    }
});
// Load html file with content which uses above content
$('<div id="ctrl" ng-controller="Ctrl">' +
     '<div ng-bind="msg"/>' +
     '<div ng-bind="serviceMsg"/>' +
     '<div test-directive/>' +
'</div>').appendTo('body');

// Register the controls/directives/services we just loaded
var queue = angular.module('Foo')._invokeQueue;
for(var i=queueLen;i<queue.length;i++) {
    var call = queue[i];
    // call is in the form [providerName, providerFunc, providerArguments]
    var provider = providers[call[0]];
    if(provider) {
        // e.g. $controllerProvider.register("Ctrl", function() { ... })
        provider[call[1]].apply(provider, call[2]);
    }
}

// compile the new element
$('body').injector().invoke(function($compile, $rootScope) {
    $compile($('#ctrl'))($rootScope);
    $rootScope.$apply();
});