Einbindung mehrer Apps/Componenten in einer Joomla Seite

Mit der vorliegenden Lösung kann jeweils nur eine CTO App pro Joomla Webseite eingebunden werden. Dies könnte z.B. in Kategorie Ansicht erforderlich werden (soweit im Intro Text bereits die Einbindung erfolgen soll).

Um die Einbindung mehrer CTO Apps in einem Joomla Artikel bzw. auf einer Joomla Page zu gewährleisten sind folgende Punkte zu berücksichtigen:

eindeutige Benennung der App bzw. Component
system.js config muss paths pro app enthalten
im letzt eingebundenen systemjs.config.js File müssen die Definitionen für jede App enthalten sein

Mit folgender systemjs.config.js Datei können die Test-Komponenten app & appTwo auf einer Seite ausgeführt werden:

   /**
     * System configuration for Angular 2 samples
     * Adjust as necessary for your application needs.
     */
    (function(global) {
        // map tells the System loader where to look for things
        var map = {
            'app':                        'app',
            'appTwo':                     'appTwo', // 'dist',
            '@angular':                   'node_modules/@angular',
            'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
            'rxjs':                       'node_modules/rxjs'
        };
        // packages tells the System loader how to load when no filename and/or no extension
        var packages = {
            'app':                        { main: 'main.js',  defaultExtension: 'js' },
            'appTwo':                     { main: 'main.js',  defaultExtension: 'js' },
            'rxjs':                       { defaultExtension: 'js' },
            'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
        };
        var ngPackageNames = [
            'common',
            'compiler',
            'core',
            'forms',
            'http',
            'platform-browser',
            'platform-browser-dynamic',
            'router',
            'router-deprecated',
            'upgrade',
        ];
        // Individual files (~300 requests):
        function packIndex(pkgName) {
            packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
        }
        // Bundled (~40 requests):
        function packUmd(pkgName) {
            packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
        }
        // Most environments should use UMD; some (Karma) need the individual index files
        var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
        // Add package entries for angular packages
        ngPackageNames.forEach(setPackageConfig);
        var config = {
            paths :{app: "/_ctoApps/test/ctoTest2/app", appTwo: "/_ctoApps/test/ctoTest3/appTwo"},
            baseURL: "/_ctoApps/test/ctoTest3",
            map: map,
            packages: packages
        };
        System.config(config);
    })(this);

Dieser Ansatz ist jedoch nicht wirklich praktikabel, daher sollte in einer späteren Version mit dynamisch erstellten systemjs.config files _gearbeitet werden. Diese sollte vom Joomla Plugin _loadcto generiert werden.

fschell / cryptool-online

Einbindung mehrer Apps/Componenten in einer Joomla Seite #1