Is it possible to take a giant string and load it through a URL path as JavaScript?

Question

I'm trying to make it easy to have an infinitely large single paged AngularJS web application by using OCLazyLoad to only load pages that are requested by the user. And I'd like to load HTML, JS and CSS lazily through a WebSocket rather than HTTP.

The reason why I want WebSockets is because all web browsers do not enforce any kind of CORs on domain names so that scaling could be done like:

ws://worker01/AccountManagementHTMLs

ws://worker02/ForumCSS

etc...

I'd like to have this kind of scaling because it could potentially already help with peer to peer file transfers between one browser to another by streaming files in raw Base64 chunks.

There's also the advantage of using raspberry pis running ubuntu as cheap but powerful worker drones.

But before I get around to those experimental features, It'd be cool to load a string into OCLazyLoad. But if you look at my Controller.js, OCLazyLoad can only load JS from a URL:

http://localhost/krogoth_gantry/DynamicJavaScriptInjector/ MODULE.JS

(function() {
    'use strict';
    angular.module('app.FUSE_APP_NAME', ['flow']).config(config);

    function config($stateProvider, $translatePartialLoaderProvider, msApiProvider, msNavigationServiceProvider) {
        $stateProvider
            .state('app.FUSE_APP_NAME', {
                url: '/FUSE_APP_NAME',
                views: {
                    'content@app': {
                        templateUrl: '/krogoth_gantry/DynamicHTMLInjector/?name=FUSE_APP_NAME',
                        controller: 'FUSE_APP_NAMEController as vm'
                    }
                }
            })
        _DJANGULAR_SLAVE_VC_INJECTION_POINT_; /* krogoth_gantry Slave VCs automatically injected here. */
        _DJANGULAR_SLAVE_MSAPI_INJECTION_POINT_
        msNavigationServiceProvider.saveItem('AK_NAVCAT_KROGOTH.AK_SUBCATAGORY_KROGOTH.FUSE_APP_NAME', {
            title: 'FUSE_APP_TITLE',
            icon: 'FUSE_APP_ICON',
            state: 'app.FUSE_APP_NAME',
            weight: 3
        });
        _DJANGULAR_SLAVE_NAV_SERVICE_INJECTIONS_
    }
})();

http://localhost/krogoth_gantry/DynamicJavaScriptInjector/ CONTROLLER.JS

(function() {
    'use strict';
    angular.module('app.FUSE_APP_NAME').controller('FUSE_APP_NAMEController', FUSE_APP_NAMEController);

    function FUSE_APP_NAMEController($log, $state, $ocLazyLoad) {
        var vm = this;
        vm.$onInit = onInit;
        vm.viewName = 'FUSE_APP_NAME';
        vm.viewDidLoad = viewDidLoad;

        vm.initLazyModule = initLazyModule;
        vm.stateGoToLazy = stateGoToLazy;

        function onInit() {
            console.log('FUSE_APP_NAME did finish loading');
            vm.viewDidLoad();
        }

        function viewDidLoad() {
            $('<p>Welcome.</p><br>').appendTo('ak-main');
        }

        function btnClickInitLazyModule() {
            $ocLazyLoad.load('/krogoth_gantry/DynamicJavaScriptInjector/?name=LAZYMVC_UNLOADED&ov=file.js');
        }

        function stateGoToLazy() {
            $state.go("app.LAZYMVC_UNLOADED");
        }
    }
})();


// Name:
// LAZYMVC_THING

// We will load: LAZYMVC_UNLOADED

// COMPILED HTML:
////krogoth_gantry/DynamicHTMLInjector/?name=FUSE_APP_NAME

// COMPILED JAVASCRIPT:
////krogoth_gantry/DynamicJavaScriptInjector/?name=FUSE_APP_NAME

OCLazyLoad seems to require a URL for loading additional AngularJS modules, is there a way to simple load a raw string as if it were the path to a JS or HTML file?

My DynamicHTMLInjector and DynamicJavaScriptInjector don't point to file system paths, I'm simply tricking the JavaScript to assuming that it's loading static files.

Answer 1

I happen to have the similar feature needed, it will let user write the js in textarea, then run this js.

The script will run once you

document.body.appendChild(newScript);




function run() {
    var el = document.getElementById('cnsl');
    var scriptText = el.value;
    var oldScript = document.getElementById('scriptContainer');
    var newScript;

    if (oldScript) {
        oldScript.parentNode.removeChild(oldScript);
    }

    newScript = document.createElement('script');
    newScript.id = 'scriptContainer';
    newScript.text = el.value;
    document.body.appendChild(newScript);
}