Edit in JSFiddle 

/*
 * F2 Docs 
 * http://docs.openf2.org
 *
 * Container Development: dynamic app configuration
 *
 */
var basePath = 'http://docs.openf2.org/demos/apps/JavaScript',
    containerConfig = {
        UI: {
            Mask: {
                loadingIcon: 'http://docs.openf2.org/img/ajax-loader.gif'   
            }
        }
    },
    
    //jsfiddle provides an echo service for simulating ajax requests, setup the data.
    echoData = {
        json: JSON.stringify([
            {
                appId: 'com_openf2_examples_javascript_quote',
                name: 'Stock quote demo app',
                manifestUrl: basePath + '/Quote/manifest.js'
            },
            {
                appId: 'com_openf2_examples_javascript_chart',
                name: 'Chart demo app',
                manifestUrl: basePath + '/Chart/manifest.js'
            }
        ])
    },
    
    getAppConfigs = function(){   
        //F2 Registry API request (using jsfiddle's echo service for simulating ajax requests)
        return $.ajax({
            url: '/echo/json/',
            data: echoData,
            type: 'POST'
        });
    };

$(function(){
    $.when( getAppConfigs() ).then(function(appConfigs){
        F2.init(containerConfig);
        F2.registerApps(appConfigs);
    });
});
<!-- App is appended to <body> -->
/** Boostrap CSS is an external reference */

body {
    margin: 20px;
}

/* we want to see the loading icon in these examples*/
.f2-app-container {
    min-height: 100px;
}

External resources loaded into this fiddle: