JSFiddle - React, Tailwind, and code Playground

by Gabriel Troia

HTML

<body>
    <div ng-if="!appReady" class="splash-screen">This is just the splash screen!</div>
    <div ng-if="appReady">Welcome to the app!</div>
    
    <script>
        angular.element(document).ready(function() {
            angular.bootstrap(document, ['myApp']);
        });
    </script>
</body>

JavaScript

/* See the gist here: https://gist.github.com/gabrielcatalin/8ec713516b3a1f1d3d7c */

'use strict';

/**
 * Adds the resolve and ready methods, to deal with application loading state.
 *
 * @param angular
 * @returns {*}
 * @constructor
 */
window.angular = (function (angular) {
    if (!angular) throw new Error('Angular is not present');

    // clone the angular object
    var A = function () {};
    A.prototype = angular;

    var enhancedAngular = new A;

    enhancedAngular.module = function () {
        var module = angular.module.apply({}, arguments);

        module.resolve = function (args) {
            var self = this,
                fn;

            if (typeof args == 'function') {
                fn = args;
                args = [];
            } else { // if array
                fn = args.pop();
            }

            args.push('$rootScope'); // add $rootScope to the list of injector, to be able to get it
            args.push(function () {
                var $rootScope = arguments[arguments.length - 1],
                    potentialPromise = fn.apply({}, Array.prototype.splice.call(arguments, 0, arguments.length - 1)); // take $rootScope out

                $rootScope.appReady = false;

                // Differ it until all the ready() are registered
                setTimeout(function() {
                    // Call the module.ready()
                    if (potentialPromise && typeof potentialPromise.then == 'function') {
                        potentialPromise.then(function () {
                            self._publishReady($rootScope);
                        });
                    } else if (!!potentialPromise) {
                        self._publishReady($rootScope);
                    }
                }, 0);
            });

            module.run(args);

            // replace itself for the next time.
            this.resolve = function () {
                throw new Error('AngularEnhancer:module.resolve() can only be called...